agent-afk 5.108.0 → 5.108.2

package/dist/web-ui-assets/styles.css

@@ -239,14 +239,64 @@ html, body {
 .tool-more:hover { color: var(--text); border-color: var(--accent); }
 
 /* ── composer ────────────────────────────────────────────────────────────── */
-.composer { border-top: 1px solid var(--border); background: var(--bg-raised); padding: 12px 20px; }
+.composer { border-top: 1px solid var(--border); background: var(--bg-raised); padding: 12px 20px; position: relative; }
 .composer.is-readonly { opacity: 0.6; }
+
+/* Slash-command menu. Anchored to the composer and floated ABOVE it so opening
+   it never reflows the transcript or shifts the textarea under the cursor. */
+.slash-menu {
+  position: absolute; bottom: 100%; left: 20px; right: 20px; z-index: 20;
+  max-height: 40vh; overflow-y: auto; margin-bottom: 6px;
+  background: var(--bg-raised); border: 1px solid var(--border);
+  border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
+}
+.slash-menu[hidden] { display: none; }
+.slash-status {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+}
+.slash-row {
+  display: flex; align-items: baseline; gap: 8px;
+  padding: 6px 12px; cursor: pointer; font-size: 13px;
+  border-left: 2px solid transparent;
+}
+.slash-row.is-selected { background: var(--bg-sunken); border-left-color: var(--accent); }
+.slash-name { font-family: var(--mono); color: var(--accent); white-space: nowrap; }
+.slash-row.is-selected .slash-name { font-weight: 600; }
+.slash-summary {
+  color: var(--text-dim); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.slash-badge {
+  font-size: 11px; color: var(--text-faint); border: 1px solid var(--border);
+  border-radius: 4px; padding: 0 5px; white-space: nowrap; flex: none;
+}
 .composer-row { display: flex; gap: 10px; align-items: flex-end; }
-#prompt {
-  flex: 1; resize: vertical; background: var(--bg-sunken); color: var(--text);
+.prompt-wrap { flex: 1; position: relative; display: flex; }
+
+/* Invariant: #prompt and .prompt-mirror paint the SAME string on top of each
+   other, so every metric that affects text layout must be declared once, here,
+   for both. Changing font, size, line-height, padding, or border width on one
+   alone makes the highlight ghost behind the caret. */
+#prompt, .prompt-mirror {
   border: 1px solid var(--border); border-radius: var(--radius);
   padding: 10px 12px; font-family: var(--sans); font-size: 14px; line-height: 1.5;
+  white-space: pre-wrap; overflow-wrap: break-word;
+}
+#prompt {
+  flex: 1; resize: vertical; background: transparent; position: relative; z-index: 1;
+}
+#prompt.slash-highlight-active {
+  /* Text is transparent so the mirror shows through; the caret is not. */
+  color: transparent; caret-color: var(--text);
 }
+#prompt::placeholder { color: var(--text-faint); }
+.prompt-mirror {
+  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
+  background: var(--bg-sunken); color: var(--text); border-color: transparent;
+}
+.prompt-mirror .tok-known { color: var(--accent); }
+.prompt-mirror .tok-slash { color: var(--text-faint); }
 #prompt:focus { outline: none; border-color: var(--accent); }
 #prompt:disabled { cursor: not-allowed; }
 .send {
@@ -280,51 +330,6 @@ html, body {
   .composer { padding: 10px 14px; }
 }
 
-/*
- * Approvals.
- *
- * Invariant: a pending approval BLOCKS the agent's turn, so these cards must be
- * impossible to miss — they sit directly above the composer (the region the
- * operator is already looking at) rather than in the transcript, where new
- * output would scroll them out of view while the turn stays stuck.
- */
-.approvals:empty { display: none; }
-.approvals {
-  border-top: 1px solid var(--border); background: var(--bg-sunken);
-  padding: 10px 16px; display: flex; flex-direction: column; gap: 8px;
-  max-height: 42vh; overflow-y: auto;
-}
-.approval-card {
-  border: 1px solid var(--warning); border-radius: var(--radius);
-  background: var(--bg-raised); padding: 11px 13px;
-}
-.approval-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
-.approval-badge {
-  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
-  letter-spacing: 0.06em; color: var(--warning);
-  border: 1px solid var(--warning); border-radius: 4px; padding: 1px 6px;
-}
-.approval-source { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }
-.approval-title { font-size: 13px; line-height: 1.5; color: var(--text); }
-.approval-desc { font-size: 12px; line-height: 1.5; color: var(--text-dim); margin-top: 4px; }
-.approval-input {
-  width: 100%; margin-top: 8px; padding: 7px 9px;
-  font-family: var(--mono); font-size: 12px;
-  color: var(--text); background: var(--bg-sunken);
-  border: 1px solid var(--border); border-radius: 6px;
-}
-.approval-input:focus { outline: none; border-color: var(--accent); }
-.approval-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
-.approval-btn {
-  font: inherit; font-size: 12px; cursor: pointer;
-  color: var(--text); background: var(--bg-sunken);
-  border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px;
-}
-.approval-btn:hover { border-color: var(--text-dim); }
-.approval-primary { color: var(--bg); background: var(--success); border-color: var(--success); }
-.approval-primary:hover { filter: brightness(1.08); }
-.approval-danger { color: var(--error); border-color: var(--error); background: transparent; }
-.approval-danger:hover { background: rgba(248, 113, 113, 0.12); }
 .stop {
   font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
   color: var(--error); background: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-afk",
-  "version": "5.108.0",
+  "version": "5.108.2",
   "description": "Open-source coding-agent harness you can actually change — own the loop (prompts, gates, routing, skills, terminal states), use any model, run long tasks while you're away.",
   "main": "dist/index.mjs",
   "types": "dist/index.d.ts",