goto-assistant 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goto-assistant",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Lightweight, self-hosted personal AI assistant",
   "license": "MIT",
   "packageManager": "pnpm@10.29.3",

package/public/index.html

@@ -5,13 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   <meta name="color-scheme" content="light dark">
   <title>goto-assistant</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.min.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/style.css">
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@15.0.12/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.3.1/dist/purify.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/cronstrue@2.61.0/dist/cronstrue.min.js"></script>
   <script src="/chat-core.js"></script>
   <script src="/task-chat.js"></script>
 </head>
@@ -72,6 +73,7 @@
           <button class="btn-icon" id="taskToggleBtn" title="Enable/Disable"></button>
           <button class="btn-icon" id="taskDeleteBtn" title="Delete">&#128465;</button>
         </div>
+        <button class="task-chat-toggle" id="taskChatToggle" title="Chat">&#128172;</button>
       </div>
       <div class="task-detail-body">
         <div class="task-info" id="taskInfo">
@@ -79,7 +81,15 @@
           <div class="task-content" id="taskContent"></div>
           <div class="task-results" id="taskResults"></div>
         </div>
-        <div class="task-chat-panel">
+        <div class="task-create-empty" id="taskCreateEmpty">
+          <p>Describe the task you'd like to create</p>
+          <button class="task-create-empty-btn" id="taskCreateOpenChat">Start chatting &rarr;</button>
+        </div>
+        <div class="task-chat-panel mobile-slide-overlay" id="taskChatPanel">
+          <div class="task-chat-header">
+            <h3>Task Chat</h3>
+            <button class="task-chat-close" id="taskChatClose">&times;</button>
+          </div>
           <div class="task-chat-messages" id="taskChatMessages"></div>
           <div class="task-chat-input">
             <div class="setup-chat-input-row">
@@ -414,6 +424,7 @@
     function showChatMain() {
       document.querySelector('.chat-main').style.display = '';
       document.getElementById('taskDetail').style.display = 'none';
+      document.getElementById('taskChatPanel').classList.remove('open');
       disconnectTaskChat();
     }
 
@@ -507,14 +518,16 @@
       document.getElementById('taskDetailTitle').textContent = task.name || task.id;
       document.getElementById('taskDetailActions').style.display = '';
       document.getElementById('taskInfo').style.display = '';
+      document.querySelector('.task-detail-body').classList.remove('create-mode');
 
       // Meta
       const meta = document.getElementById('taskMeta');
+      const humanSchedule = task.schedule ? cronToHuman(task.schedule) : null;
       meta.innerHTML = `
         <div class="task-meta-row"><span class="task-meta-label">ID</span><span class="task-meta-value">${escapeHtml(task.id || '')}</span></div>
         <div class="task-meta-row"><span class="task-meta-label">Type</span><span class="task-meta-value"><span class="task-type-badge">${task.type === 'AI' ? 'AI' : 'CMD'}</span></span></div>
         <div class="task-meta-row"><span class="task-meta-label">Status</span><span class="task-meta-value">${task.enabled ? '<span class="task-enabled-badge">Enabled</span>' : '<span class="task-disabled-badge">Disabled</span>'}</span></div>
-        ${task.schedule ? `<div class="task-meta-row"><span class="task-meta-label">Schedule</span><span class="task-meta-value"><code>${escapeHtml(task.schedule)}</code></span></div>` : ''}
+        ${task.schedule ? `<div class="task-meta-row"><span class="task-meta-label">Schedule</span><span class="task-meta-value">${humanSchedule ? `<span class="task-schedule-human">${escapeHtml(humanSchedule)}</span> <code class="task-schedule-raw">${escapeHtml(task.schedule)}</code>` : `<code>${escapeHtml(task.schedule)}</code>`}</span></div>` : ''}
       `;
 
       // Content (prompt or command)
@@ -597,7 +610,7 @@
           ? DOMPurify.sanitize(marked.parse(outputText))
           : escapeHtml(outputText);
         html += `<div class="task-result-item">
-          <div class="task-result-header"><span class="task-result-time">${escapeHtml(time)}${duration ? ' &middot; ' + escapeHtml(duration) : ''}</span><span class="task-result-status ${status}">${isError ? 'Failed' : 'OK'}</span></div>
+          <div class="task-result-header"><span class="task-result-time">${escapeHtml(time)}</span><div class="task-result-header-right">${duration ? '<span class="task-result-duration">' + escapeHtml(duration) + '</span>' : ''}<span class="task-result-status ${status}">${isError ? 'Failed' : 'OK'}</span></div></div>
           <div class="task-result-output">${renderedOutput}</div>
         </div>`;
       });
@@ -611,8 +624,13 @@
       document.getElementById('taskDetailTitle').textContent = 'Create Task';
       document.getElementById('taskDetailActions').style.display = 'none';
       document.getElementById('taskInfo').style.display = 'none';
+      document.querySelector('.task-detail-body').classList.add('create-mode');
       showTaskDetail();
       initTaskChat(null);
+      // Auto-open chat overlay on mobile
+      if (window.matchMedia('(max-width: 768px)').matches) {
+        document.getElementById('taskChatPanel').classList.add('open');
+      }
     }
 
     // On task chat done, refresh task info without clearing chat messages
@@ -664,6 +682,17 @@
       }
     });
 
+    // Mobile task chat overlay toggle
+    document.getElementById('taskChatToggle').addEventListener('click', () => {
+      document.getElementById('taskChatPanel').classList.add('open');
+    });
+    document.getElementById('taskChatClose').addEventListener('click', () => {
+      document.getElementById('taskChatPanel').classList.remove('open');
+    });
+    document.getElementById('taskCreateOpenChat').addEventListener('click', () => {
+      document.getElementById('taskChatPanel').classList.add('open');
+    });
+
     connectWs();
     loadConversations();
   </script>

package/public/setup.html

@@ -5,13 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   <meta name="color-scheme" content="light dark">
   <title>goto-assistant — Setup</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.min.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/style.css">
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@15.0.12/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.3.1/dist/purify.min.js"></script>
   <script src="/cron-sync.js"></script>
   <script src="/setup.js"></script>
   <script src="/chat-core.js"></script>
@@ -59,7 +59,7 @@
     </div>
 
     <!-- Right: chat panel -->
-    <div class="setup-chat" id="setupChat">
+    <div class="setup-chat mobile-slide-overlay" id="setupChat">
       <div class="setup-chat-header">
         <h3>Setup Wizard</h3>
         <button class="setup-chat-close" id="chatCloseBtn">&times;</button>

package/public/style.css

@@ -177,7 +177,8 @@ body {
 .btn-icon, .settings-btn, .hamburger-btn,
 .file-upload-btn, .file-preview-remove,
 .conversation-item .delete-btn,
-.setup-chat-close,
+.setup-chat-close, .task-chat-close, .task-chat-toggle,
+.task-create-empty-btn,
 .sidebar-tab, .task-back-btn,
 .task-detail-actions .btn-icon {
   background: none; border: none; box-shadow: none;
@@ -703,7 +704,7 @@ body {
 }
 
 .task-detail-body {
-  flex: 1; display: flex; flex-direction: column;
+  flex: 1; display: flex; flex-direction: row;
   overflow: hidden;
 }
 
@@ -711,8 +712,8 @@ body {
 .task-info {
   padding: 16px 20px;
   overflow-y: auto;
-  max-height: 50%;
-  border-bottom: 1px solid var(--surface-border);
+  flex: 1;
+  min-width: 0;
 }
 
 .task-meta {
@@ -740,6 +741,14 @@ body {
   padding: 2px 6px;
   border-radius: 4px;
 }
+.task-schedule-human {
+  font-weight: 450;
+}
+.task-schedule-raw {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-left: 6px;
+}
 
 .task-enabled-badge {
   color: #22c55e; font-weight: 600; font-size: 12px;
@@ -783,12 +792,24 @@ body {
 }
 .task-result-header {
   display: flex; justify-content: space-between; align-items: center;
-  padding: 6px 12px;
+  padding: 8px 12px;
   background: var(--surface-2);
   border-bottom: 1px solid var(--surface-border);
 }
 .task-result-time {
-  font-size: 12px; color: var(--text-muted);
+  font-size: 13px; font-weight: 500; color: var(--text-secondary);
+}
+.task-result-header-right {
+  display: flex; align-items: center; gap: 8px;
+}
+.task-result-duration {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: var(--surface-1);
+  border: 1px solid var(--surface-border);
+  padding: 1px 7px;
+  border-radius: 4px;
 }
 .task-result-status {
   font-size: 11px; font-weight: 700; text-transform: uppercase;
@@ -859,9 +880,75 @@ body {
 .task-result-output img { max-width: 100%; border-radius: 6px; }
 
 /* ---- Task Inline Chat ---- */
+.task-chat-toggle {
+  display: none;
+  cursor: pointer; font-size: 18px; padding: 6px 8px;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  transition: all 0.15s ease;
+}
+.task-chat-toggle:hover {
+  background: var(--surface-2);
+  color: var(--text-primary);
+}
 .task-chat-panel {
-  flex: 1; display: flex; flex-direction: column;
+  width: 360px; flex-shrink: 0;
+  display: flex; flex-direction: column;
   min-height: 0; overflow: hidden;
+  border-left: 1px solid var(--surface-border);
+}
+.task-chat-header {
+  display: none;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--surface-border);
+  justify-content: space-between; align-items: center;
+}
+.task-chat-header h3 {
+  margin: 0; font-size: 15px; font-weight: 600;
+}
+.task-chat-close {
+  font-size: 20px; cursor: pointer;
+  color: var(--text-muted); padding: 4px 8px;
+  border-radius: 8px;
+  transition: all 0.15s ease;
+}
+.task-chat-close:hover {
+  background: var(--surface-2);
+  color: var(--text-primary);
+}
+.task-detail-body.create-mode .task-chat-panel {
+  flex: 1; width: auto; border-left: none;
+}
+.task-create-empty {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  color: var(--text-muted);
+  font-style: italic;
+  font-family: var(--font-display);
+  font-size: 18px;
+}
+.task-create-empty p { margin: 0; }
+.task-detail-body.create-mode .task-create-empty { display: flex; flex: 1; }
+.task-create-empty-btn {
+  background: var(--accent);
+  color: #fff;
+  border-radius: 12px;
+  padding: 10px 24px;
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.task-create-empty-btn:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+}
+@media (min-width: 769px) {
+  .task-create-empty { display: none !important; }
 }
 .task-chat-messages {
   flex: 1; overflow-y: auto; padding: 16px 20px;
@@ -1060,26 +1147,37 @@ body {
 
   .input-area { padding: 10px 12px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
   .input-row { max-width: 100%; border-radius: 16px; }
-  .input-row textarea { font-size: 16px; }
+  .input-row textarea,
+  .setup-chat-input-row textarea { font-size: 16px; }
 
   .conversation-item .delete-btn { display: inline-block; }
 
   /* Task mobile */
   .task-meta { flex-direction: column; gap: 4px; }
-  .task-chat-panel { min-height: 200px; }
-  .task-info { max-height: 40%; }
+  .task-detail-body { flex-direction: column; }
+  .task-info { flex: 1; }
+  .task-chat-toggle { display: block; }
+  /* Shared mobile slide-in overlay */
+  .mobile-slide-overlay {
+    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
+    /* width: 100% is NOT redundant — it overrides explicit widths (e.g. .setup-chat 400px,
+       .task-chat-panel 360px) that would otherwise take priority over left/right: 0 */
+    width: 100%;
+    background: var(--surface-0);
+    transform: translateX(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 15;
+  }
+  .mobile-slide-overlay.open { transform: translateX(0); }
+
+  .task-chat-panel { border-left: none; }
+  .task-chat-header { display: flex; }
   .task-chat-input { padding: 10px 12px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
 
   /* Setup mobile */
   .setup-layout { flex-direction: column; }
   .setup-form { flex: 1; }
-  .setup-chat {
-    position: fixed; top: 0; right: 0; bottom: 0; width: 100%;
-    transform: translateX(100%);
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 15;
-  }
-  .setup-chat.open { transform: translateX(0); }
+  .setup-chat-input { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
 }
 
 @media (min-width: 769px) {

package/public/task-chat.js

@@ -1,6 +1,15 @@
 // task-chat.js — Inline chat logic for task mode (create/modify tasks via AI).
 // Loaded as a plain <script> in the browser; importable via require() in tests.
 
+function cronToHuman(expr) {
+  if (typeof cronstrue === 'undefined' || !expr) return null;
+  try {
+    return cronstrue.toString(expr);
+  } catch (e) {
+    return null;
+  }
+}
+
 var taskRunState = {};
 // Shape: { [taskId]: { pollTimer, timeoutTimer, runStartTime, pendingResult } }
 // pendingResult: null while running, string (chat text) when result arrived but user wasn't viewing this task
@@ -241,6 +250,7 @@ function disconnectTaskChat() {
 
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
+    cronToHuman: cronToHuman,
     taskChatState: taskChatState,
     taskRunState: taskRunState,
     cancelTaskRun: cancelTaskRun,