bosun 0.28.0 → 0.28.2

package/ui/modules/settings-schema.js

@@ -53,6 +53,7 @@ export const SETTINGS_SCHEMA = [
   { key: "TELEGRAM_API_BASE_URL",          label: "API Base URL",               category: "telegram", type: "string",  defaultVal: "https://api.telegram.org", description: "Override for Telegram API proxy.", advanced: true, validate: "^https?://" },
   { key: "TELEGRAM_HTTP_TIMEOUT_MS",       label: "HTTP Timeout",               category: "telegram", type: "number",  defaultVal: 15000, min: 5000, max: 60000, unit: "ms", description: "Per-request timeout for Telegram API calls.", advanced: true },
   { key: "TELEGRAM_RETRY_ATTEMPTS",        label: "Retry Attempts",             category: "telegram", type: "number",  defaultVal: 4, min: 0, max: 10, description: "Number of retry attempts for transient Telegram API failures.", advanced: true },
+  { key: "TELEGRAM_HISTORY_RETENTION_DAYS", label: "Auto-Delete History",       category: "telegram", type: "number",  defaultVal: 3, min: 0, max: 365, unit: "days", description: "Automatically delete bot messages older than this many days to keep the chat tidy. 0 = disabled. Note: Telegram may silently skip messages older than 48 h in private chats.", restart: false },
   { key: "PROJECT_NAME",                   label: "Project Name",               category: "telegram", type: "string",  description: "Display name used in Telegram messages and logs. Auto-detected from package.json if not set." },
 
   // ── Mini App / UI Server ──────────────────────────────────────
@@ -61,7 +62,8 @@ export const SETTINGS_SCHEMA = [
   { key: "TELEGRAM_UI_HOST",               label: "Bind Host",                  category: "miniapp", type: "string",  defaultVal: "0.0.0.0", description: "Network interface to bind. Use 127.0.0.1 for local-only access.", restart: true },
   { key: "TELEGRAM_UI_PUBLIC_HOST",        label: "Public Host",                category: "miniapp", type: "string",  description: "Public hostname if behind a reverse proxy. Auto-detected if not set." },
   { key: "TELEGRAM_UI_BASE_URL",           label: "Base URL Override",          category: "miniapp", type: "string",  description: "Full public URL (e.g., https://my-domain.com). Takes precedence over auto-detection.", validate: "^https?://" },
-  { key: "TELEGRAM_UI_ALLOW_UNSAFE",       label: "Allow Unsafe (No Auth)",     category: "miniapp", type: "boolean", defaultVal: false, description: "⚠️ DANGER: Disables ALL authentication. Only for local development.", restart: true },
+  { key: "TELEGRAM_UI_ALLOW_UNSAFE",       label: "⛔ Allow Unsafe (No Auth)",  category: "miniapp", type: "boolean", defaultVal: false, description: "⛔ DANGER: Disables ALL authentication. Anyone with your URL can control agents, read secrets, and execute code on your machine. Combined with a tunnel, this exposes your machine to the ENTIRE INTERNET. Only enable for localhost-only debugging with tunnel DISABLED.", restart: true, danger: true },
+  { key: "_UNSAFE_TUNNEL_WARNING",          label: "",                            category: "miniapp", type: "info",    description: "🔴 WARNING: If 'Allow Unsafe' is ON and 'Tunnel Mode' is not disabled, your UI is publicly accessible with ZERO authentication. This is a critical security risk." },
   { key: "TELEGRAM_UI_AUTH_MAX_AGE_SEC",   label: "Auth Token Max Age",         category: "miniapp", type: "number",  defaultVal: 86400, min: 300, max: 604800, unit: "sec", description: "Maximum age for Telegram initData tokens before they expire." },
   { key: "TELEGRAM_UI_TUNNEL",             label: "Tunnel Mode",                category: "miniapp", type: "select",  defaultVal: "auto", options: ["auto", "cloudflared", "disabled"], description: "Cloudflare tunnel mode. 'auto' starts tunnel if cloudflared is available.", restart: true },
 
@@ -111,6 +113,14 @@ export const SETTINGS_SCHEMA = [
   { key: "TASK_PLANNER_DEDUP_HOURS",       label: "Planner Dedup Window",       category: "kanban", type: "number", defaultVal: 6, min: 1, max: 72, unit: "hours", description: "Hours to look back for duplicate task detection.", advanced: true },
   { key: "BOSUN_PROMPT_PLANNER",  label: "Planner Prompt Path",         category: "advanced", type: "string", description: "Override the task planner prompt file path.", advanced: true },
 
+  // ── Logging / Telemetry ──────────────────────────────────────
+  { key: "BOSUN_TELEMETRY_SAMPLE_RATE",    label: "Telemetry Sample Rate",      category: "logging", type: "number", defaultVal: 1, min: 0, max: 1, description: "Sampling rate for high-volume telemetry events (agent_output/tool events). 1 = full, 0.1 = 10% sample.", advanced: true },
+  { key: "AGENT_WORK_STREAM_RETENTION_DAYS", label: "Stream Retention",         category: "logging", type: "number", defaultVal: 30, min: 1, max: 365, unit: "days", description: "How long to keep agent-work stream logs before rotation.", advanced: true },
+  { key: "AGENT_WORK_ERROR_RETENTION_DAYS",  label: "Error Retention",          category: "logging", type: "number", defaultVal: 90, min: 1, max: 365, unit: "days", description: "How long to keep error logs before rotation.", advanced: true },
+  { key: "AGENT_WORK_SESSION_RETENTION_COUNT", label: "Session Retention Count", category: "logging", type: "number", defaultVal: 100, min: 10, max: 10000, description: "Number of session log files to keep.", advanced: true },
+  { key: "AGENT_WORK_ARCHIVE_RETENTION_DAYS", label: "Archive Retention",       category: "logging", type: "number", defaultVal: 180, min: 30, max: 3650, unit: "days", description: "Retention window for compressed log archives.", advanced: true },
+  { key: "AGENT_WORK_METRICS_ROTATION_ENABLED", label: "Rotate Metrics Log",    category: "logging", type: "boolean", defaultVal: true, description: "Rotate metrics log monthly to keep file size bounded.", advanced: true },
+
   // ── GitHub / Git ─────────────────────────────────────────
   { key: "GITHUB_TOKEN",                   label: "GitHub Token",               category: "github", type: "secret", sensitive: true, description: "Personal access token or fine-grained token for GitHub API. Required for GitHub kanban backend." },
   { key: "GITHUB_REPOSITORY",              label: "Repository",                 category: "github", type: "string", description: "GitHub repository in owner/repo format. Auto-detected from git remote if not set.", validate: "^[\\w.-]+/[\\w.-]+$" },

package/ui/modules/state.js

@@ -43,6 +43,7 @@ const CACHE_TTL = {
   threads: 5000, logs: 15000, worktrees: 30000, workspaces: 30000,
   presence: 30000, config: 60000, projects: 60000, git: 20000,
   infra: 30000,
+  telemetry: 15000,
 };
 
 function _cacheKey(url) { return url; }
@@ -111,6 +112,12 @@ export const agentLogLines = signal(200);
 export const agentLogQuery = signal("");
 export const agentContext = signal(null);
 
+// ── Telemetry
+export const telemetrySummary = signal(null);
+export const telemetryErrors = signal([]);
+export const telemetryExecutors = signal({});
+export const telemetryAlerts = signal([]);
+
 // ── Config (routing, regions, etc.)
 export const configData = signal(null);
 
@@ -590,6 +597,50 @@ export async function loadConfig() {
   _markFresh("config");
 }
 
+export async function loadTelemetrySummary() {
+  const url = "/api/telemetry/summary";
+  if (_cacheFresh(url, "telemetry")) return;
+  const res = await apiFetch(url, { _silent: true }).catch(() => ({
+    ok: false,
+  }));
+  telemetrySummary.value = res?.data ?? res ?? null;
+  _cacheSet(url, telemetrySummary.value);
+  _markFresh("telemetry");
+}
+
+export async function loadTelemetryErrors() {
+  const url = "/api/telemetry/errors";
+  if (_cacheFresh(url, "telemetry")) return;
+  const res = await apiFetch(url, { _silent: true }).catch(() => ({
+    ok: false,
+  }));
+  telemetryErrors.value = res?.data ?? res ?? [];
+  _cacheSet(url, telemetryErrors.value);
+  _markFresh("telemetry");
+}
+
+export async function loadTelemetryExecutors() {
+  const url = "/api/telemetry/executors";
+  if (_cacheFresh(url, "telemetry")) return;
+  const res = await apiFetch(url, { _silent: true }).catch(() => ({
+    ok: false,
+  }));
+  telemetryExecutors.value = res?.data ?? res ?? {};
+  _cacheSet(url, telemetryExecutors.value);
+  _markFresh("telemetry");
+}
+
+export async function loadTelemetryAlerts() {
+  const url = "/api/telemetry/alerts";
+  if (_cacheFresh(url, "telemetry")) return;
+  const res = await apiFetch(url, { _silent: true }).catch(() => ({
+    ok: false,
+  }));
+  telemetryAlerts.value = res?.data ?? res ?? [];
+  _cacheSet(url, telemetryAlerts.value);
+  _markFresh("telemetry");
+}
+
 /* ═══════════════════════════════════════════════════════════════
  *  TAB REFRESH — map tab names to their required loaders
  * ═══════════════════════════════════════════════════════════════ */
@@ -609,6 +660,13 @@ const TAB_LOADERS = {
   control: () => Promise.all([loadExecutor(), loadConfig()]),
   logs: () =>
     Promise.all([loadLogs(), loadAgentLogFileList(), loadAgentLogTailData()]),
+  telemetry: () =>
+    Promise.all([
+      loadTelemetrySummary(),
+      loadTelemetryErrors(),
+      loadTelemetryExecutors(),
+      loadTelemetryAlerts(),
+    ]),
   settings: () => Promise.all([loadStatus(), loadConfig()]),
 };
 
@@ -687,6 +745,7 @@ const WS_CHANNEL_MAP = {
   infra: ["worktrees", "workspaces", "presence"],
   control: ["executor", "overview"],
   logs: ["*"],
+  telemetry: ["*"],
   settings: ["overview"],
 };
 

package/ui/styles/components.css

@@ -680,6 +680,24 @@ select.input {
   gap: 8px;
 }
 
+/* ─── Create Task Form ─── */
+.create-task-form {
+  gap: 10px;
+}
+
+.create-task-form textarea.input {
+  resize: none;
+  min-height: 64px;
+  line-height: 1.5;
+}
+
+.create-task-advanced-toggle {
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  opacity: 0.75;
+  margin-top: -4px;
+}
+
 @media (max-width: 640px) {
   .task-card-header {
     flex-direction: column;
@@ -852,10 +870,16 @@ select.input {
   border-bottom: none;
   width: 100%;
   max-width: 500px;
-  max-height: 92vh;
-  overflow-y: auto;
-  padding: 20px 16px;
-  padding-bottom: calc(20px + var(--safe-bottom));
+  /* dvh = dynamic viewport height: shrinks when keyboard appears on Android/modern iOS */
+  max-height: 92dvh;
+  /* Fallback for browsers without dvh — use TG viewport var which updates on keyboard */
+  max-height: min(92dvh, calc(var(--viewport-height, 100dvh) - var(--header-height, 60px)));
+  overflow: hidden; /* scroll lives in .modal-body */
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  /* Lift above software keyboard on iOS (set by JS via visualViewport API) */
+  margin-bottom: var(--keyboard-height, 0px);
   animation: springUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   box-shadow: 0 -10px 30px rgba(1, 4, 9, 0.4);
 }
@@ -904,9 +928,34 @@ select.input {
   flex-direction: column;
   align-items: center;
   background: var(--bg-elevated);
-  margin: -20px -16px 16px;
+  margin: 0;
   padding: 12px 16px;
   border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+/* ─── Modal scrollable body ─── */
+.modal-body {
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  padding: 16px;
+  padding-bottom: max(16px, calc(var(--safe-bottom, 0px) + 16px));
+  flex: 1;
+  min-height: 0; /* critical for flex shrink to work */
+}
+
+/* ─── Modal sticky footer (submit actions) ─── */
+.modal-footer {
+  flex-shrink: 0;
+  padding: 12px 16px;
+  padding-bottom: max(14px, calc(var(--safe-bottom, 0px) + 12px));
+  border-top: 1px solid var(--border);
+  background: var(--bg-elevated);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .modal-header .modal-handle {
@@ -1759,7 +1808,7 @@ select.input {
 
   .modal-content {
     border-radius: var(--radius-xl);
-    margin-bottom: 24px;
+    margin-bottom: 24px; /* floating above baseline on tablet/desktop */
   }
 
   .modal-overlay {
@@ -2969,7 +3018,7 @@ select.input {
 
 /* ─── Modal swipe-to-dismiss ─── */
 .modal-content {
-  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s ease;
+  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s ease, margin-bottom 0.15s ease;
   will-change: transform, opacity;
   touch-action: pan-y;
   overscroll-behavior: contain;
@@ -2977,7 +3026,10 @@ select.input {
 
 .modal-content.modal-dragging {
   transition: none;
-  overflow-y: hidden;
+}
+
+.modal-content.modal-dragging .modal-body {
+  overflow-y: hidden; /* freeze inner scroll while drag-dismissing */
 }
 
 /* ─── ConfirmDialog ─── */

package/ui/styles.css

@@ -139,3 +139,91 @@
   font-size: 12px;
   text-align: center;
 }
+
+/* ─── Telemetry Tab ─── */
+.telemetry-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.telemetry-tab .section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.telemetry-summary .metric-grid {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+}
+
+.metric-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-hint);
+}
+
+.metric-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.telemetry-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.telemetry-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.telemetry-list li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.telemetry-label {
+  color: var(--text-secondary);
+}
+
+.telemetry-count {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.telemetry-alerts {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.telemetry-alert-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.telemetry-alert-meta {
+  font-size: 12px;
+  color: var(--text-hint);
+  margin-top: 4px;
+}

package/ui/tabs/tasks.js

@@ -1817,6 +1817,7 @@ function CreateTaskModalInline({ onClose }) {
   const [submitting, setSubmitting] = useState(false);
   const [workspaceId, setWorkspaceId] = useState(activeWorkspaceId.value || "");
   const [repository, setRepository] = useState("");
+  const [showAdvanced, setShowAdvanced] = useState(false);
   const activeWsId = activeWorkspaceId.value || "";
 
   const workspaceOptions = managedWorkspaces.value || [];
@@ -1902,97 +1903,134 @@ function CreateTaskModalInline({ onClose }) {
     repository,
   ]);
 
+  const parsedTags = normalizeTagInput(tagsInput);
+  const hasAdvanced = baseBranch || draft || showAdvanced;
+
+  const footerContent = html`
+    <button
+      class="btn btn-primary"
+      style="width:100%"
+      onClick=${handleSubmit}
+      disabled=${submitting}
+    >
+      ${submitting ? "Creating…" : "✓ Create Task"}
+    </button>
+  `;
+
   return html`
-    <${Modal} title="New Task" onClose=${onClose} contentClassName="modal-content-wide">
-      <div class="flex-col gap-md modal-form-grid">
+    <${Modal}
+      title="New Task"
+      onClose=${onClose}
+      contentClassName="modal-content-wide"
+      footer=${footerContent}
+    >
+      <div class="flex-col create-task-form">
+
+        <!-- Title — autofocus so keyboard opens immediately -->
         <input
-          class="input modal-form-span"
-          placeholder="Task title"
+          class="input"
+          placeholder="Task title *"
           value=${title}
+          autoFocus=${true}
           onInput=${(e) => setTitle(e.target.value)}
+          onKeyDown=${(e) => e.key === "Enter" && !e.shiftKey && handleSubmit()}
         />
+
+        <!-- Description — compact 2-row textarea -->
         <textarea
-          class="input modal-form-span"
-          rows="4"
-          placeholder="Description"
+          class="input"
+          rows="2"
+          placeholder="What needs to be done? (optional)"
           value=${description}
-          onInput=${(e) => setDescription(e.target.value)}
+          onInput=${(e) => {
+            setDescription(e.target.value);
+            // auto-grow up to 6 rows
+            e.target.style.height = "auto";
+            e.target.style.height = Math.min(e.target.scrollHeight, 6 * 24 + 16) + "px";
+          }}
         ></textarea>
-        <input
-          class="input modal-form-span"
-          placeholder="Base branch (optional, e.g. feature/xyz)"
-          value=${baseBranch}
-          onInput=${(e) => setBaseBranch(e.target.value)}
+
+        <!-- Priority — always visible, most commonly changed -->
+        <${SegmentedControl}
+          options=${[
+            { value: "low", label: "Low" },
+            { value: "medium", label: "Med" },
+            { value: "high", label: "High" },
+            { value: "critical", label: "🔥" },
+          ]}
+          value=${priority}
+          onChange=${(v) => { haptic(); setPriority(v); }}
         />
-        <div class="input-row modal-form-span">
-          <select
-            class="input"
-            value=${workspaceId}
-            onChange=${(e) => setWorkspaceId(e.target.value)}
-          >
-            <option value="">Active workspace</option>
-            ${workspaceOptions.map(
-              (ws) => html`<option value=${ws.id}>${ws.name || ws.id}</option>`,
-            )}
-          </select>
-          <select
-            class="input"
-            value=${repository}
-            onChange=${(e) => setRepository(e.target.value)}
-            disabled=${!repositoryOptions.length}
-          >
-            <option value="">
-              ${repositoryOptions.length ? "Auto repository" : "No repos in workspace"}
-            </option>
-            ${repositoryOptions.map(
-              (repo) =>
-                html`<option value=${repo.slug}>${repo.name}${repo.primary ? " ★" : ""}</option>`,
-            )}
-          </select>
-        </div>
+
+        <!-- Workspace + Repo row -->
+        ${workspaceOptions.length > 0 && html`
+          <div class="input-row">
+            <select
+              class="input"
+              value=${workspaceId}
+              onChange=${(e) => setWorkspaceId(e.target.value)}
+            >
+              <option value="">Active workspace</option>
+              ${workspaceOptions.map(
+                (ws) => html`<option value=${ws.id}>${ws.name || ws.id}</option>`,
+              )}
+            </select>
+            <select
+              class="input"
+              value=${repository}
+              onChange=${(e) => setRepository(e.target.value)}
+              disabled=${!repositoryOptions.length}
+            >
+              <option value="">
+                ${repositoryOptions.length ? "Auto repo" : "No repos"}
+              </option>
+              ${repositoryOptions.map(
+                (repo) =>
+                  html`<option value=${repo.slug}>${repo.name}${repo.primary ? " ★" : ""}</option>`,
+              )}
+            </select>
+          </div>
+        `}
+
+        <!-- Tags -->
         <input
-          class="input modal-form-span"
-          placeholder="Tags (comma-separated)"
+          class="input"
+          placeholder="Tags (comma-separated, optional)"
           value=${tagsInput}
           onInput=${(e) => setTagsInput(e.target.value)}
         />
-        ${normalizeTagInput(tagsInput).length > 0 &&
-        html`
-          <div class="tag-row modal-form-span">
-            ${normalizeTagInput(tagsInput).map(
-              (tag) => html`<span class="tag-chip">#${tag}</span>`,
-            )}
+        ${parsedTags.length > 0 && html`
+          <div class="tag-row">
+            ${parsedTags.map((tag) => html`<span class="tag-chip">#${tag}</span>`)}
           </div>
         `}
-        <div class="modal-form-span">
+
+        <!-- Advanced toggle -->
+        <button
+          class="btn btn-ghost btn-sm create-task-advanced-toggle"
+          style="text-align:left;justify-content:flex-start;gap:6px;padding:6px 0;color:var(--text-hint)"
+          onClick=${() => setShowAdvanced(!showAdvanced)}
+          type="button"
+        >
+          <span style="display:inline-block;transition:transform 0.15s;transform:rotate(${showAdvanced ? 90 : 0}deg)">▶</span>
+          Advanced${hasAdvanced && !showAdvanced ? " •" : ""}
+        </button>
+
+        <!-- Advanced fields: base branch + draft -->
+        ${(showAdvanced || hasAdvanced) && html`
+          <input
+            class="input"
+            placeholder="Base branch (optional, e.g. main)"
+            value=${baseBranch}
+            onInput=${(e) => setBaseBranch(e.target.value)}
+          />
           <${Toggle}
-            label="Draft (keep in backlog)"
+            label="Draft (save to backlog, don't start)"
             checked=${draft}
             onChange=${(next) => setDraft(next)}
           />
-        </div>
-        <div class="modal-form-span">
-          <${SegmentedControl}
-            options=${[
-              { value: "low", label: "Low" },
-              { value: "medium", label: "Medium" },
-              { value: "high", label: "High" },
-              { value: "critical", label: "Critical" },
-            ]}
-            value=${priority}
-            onChange=${(v) => {
-              haptic();
-              setPriority(v);
-            }}
-          />
-        </div>
-        <button
-          class="btn btn-primary modal-form-span"
-          onClick=${handleSubmit}
-          disabled=${submitting}
-        >
-          ${submitting ? "Creating…" : "Create Task"}
-        </button>
+        `}
+
       </div>
     <//>
   `;