@firstpick/pi-package-webui 0.3.4 → 0.3.5

package/bin/pi-webui.mjs

@@ -33,6 +33,7 @@ const CODEX_TOKEN_REFRESH_SKEW_MS = 5 * 60 * 1000;
 const OPENAI_CODEX_PROVIDER_ID = "openai-codex";
 const OPENAI_CODEX_USAGE_ENDPOINT = process.env.PI_WEBUI_CODEX_USAGE_URL || "https://chatgpt.com/backend-api/wham/usage";
 const BODY_LIMIT_BYTES = 1024 * 1024;
+const SKILL_FILE_BODY_LIMIT_BYTES = 2 * 1024 * 1024;
 const PROMPT_BODY_LIMIT_BYTES = 24 * 1024 * 1024;
 const UPLOAD_BODY_LIMIT_BYTES = 96 * 1024 * 1024;
 const ATTACHMENT_UPLOAD_MAX_FILES = 12;
@@ -4242,6 +4243,109 @@ async function getMergedSkillConfigData(tab) {
   return { skills: mergeRuntimeAndResolvedSkills(runtime.skills || [], resolved.skills || []) };
 }
 
+function normalizeSkillRequestName(value) {
+  return String(value || "").trim().replace(/^skill:/i, "").toLowerCase();
+}
+
+function skillFileRequestParts(source = {}) {
+  return {
+    name: normalizeSkillRequestName(source.name || source.skillName),
+    filePath: String(source.path || source.filePath || "").trim(),
+  };
+}
+
+function sameResolvedPath(left, right) {
+  if (!left || !right) return false;
+  return path.resolve(left) === path.resolve(right);
+}
+
+function skillFilePathInside(root, target) {
+  if (!root || !target) return false;
+  const relative = path.relative(path.resolve(root), path.resolve(target));
+  return !relative || (!relative.startsWith("..") && !path.isAbsolute(relative));
+}
+
+function skillNameFromSkillFilePath(filePath) {
+  const normalized = String(filePath || "").replace(/\\/g, "/");
+  const match = normalized.match(/\/skills\/([^/]+)\/SKILL\.md$/i);
+  return normalizeSkillRequestName(match?.[1] || "");
+}
+
+async function resolveExplicitSkillFilePath(tab, filePath, requestedName = "") {
+  const resolvedPath = path.resolve(filePath || "");
+  const pathSkillName = skillNameFromSkillFilePath(resolvedPath);
+  if (!pathSkillName) throw makeHttpError(400, "Skill path must point to /skills/<name>/SKILL.md");
+  if (requestedName && requestedName !== pathSkillName) throw makeHttpError(400, "Skill name does not match the requested SKILL.md path");
+  const allowedRoots = [agentDir, path.join(tab?.cwd || options.cwd, ".pi")];
+  if (!allowedRoots.some((root) => skillFilePathInside(root, resolvedPath))) {
+    throw makeHttpError(403, "Skill path is outside allowed Pi skill locations");
+  }
+  const info = await stat(resolvedPath).catch(() => null);
+  if (!info?.isFile()) throw makeHttpError(404, `Skill file not found: ${resolvedPath}`);
+  return {
+    name: pathSkillName,
+    description: "",
+    filePath: resolvedPath,
+    enabled: true,
+    fileStats: info,
+  };
+}
+
+async function resolveEditableSkillFile(tab, request = {}) {
+  const { name, filePath } = skillFileRequestParts(request);
+  if (!name && !filePath) throw makeHttpError(400, "Skill name or path is required");
+  const { skills } = await resolveSkillResources(tab);
+  const skill = skills.find((item) => (
+    filePath ? sameResolvedPath(item.filePath, filePath) : name && normalizeSkillRequestName(item.name) === name
+  ));
+  if (skill?.filePath) {
+    if (path.basename(skill.filePath) !== "SKILL.md") throw makeHttpError(400, "Only SKILL.md files can be edited from skill tags");
+    const info = await stat(skill.filePath).catch(() => null);
+    if (!info?.isFile()) throw makeHttpError(404, `Skill file not found: ${skill.filePath}`);
+    return { ...skill, filePath: path.resolve(skill.filePath), fileStats: info };
+  }
+  if (filePath) return resolveExplicitSkillFilePath(tab, filePath, name);
+  throw makeHttpError(404, "Skill is not configured in this Pi tab");
+}
+
+async function getSkillFileData(tab, request = {}) {
+  const skill = await resolveEditableSkillFile(tab, request);
+  const content = await readFile(skill.filePath, "utf8");
+  return {
+    name: parseSkillFrontmatter(content, skill.filePath).name || skill.name,
+    description: skill.description || "",
+    path: skill.filePath,
+    content,
+    mtimeMs: skill.fileStats.mtimeMs,
+    size: skill.fileStats.size,
+    enabled: skill.enabled === true,
+  };
+}
+
+async function saveSkillFileData(tab, body = {}) {
+  if (typeof body.content !== "string") throw makeHttpError(400, "Skill content must be a string");
+  if (body.content.includes("\0")) throw makeHttpError(400, "Skill content cannot contain null bytes");
+  if (Buffer.byteLength(body.content, "utf8") > SKILL_FILE_BODY_LIMIT_BYTES) throw makeHttpError(413, `Skill file is too large (limit ${formatBytes(SKILL_FILE_BODY_LIMIT_BYTES)})`);
+  const skill = await resolveEditableSkillFile(tab, body);
+  const expectedMtimeMs = Number(body.mtimeMs);
+  if (Number.isFinite(expectedMtimeMs) && Math.abs(skill.fileStats.mtimeMs - expectedMtimeMs) > 5) {
+    throw makeHttpError(409, "Skill file changed on disk after it was opened. Reopen it before saving.");
+  }
+  const tmpFile = `${skill.filePath}.${process.pid}.${Date.now()}.tmp`;
+  await writeFile(tmpFile, body.content, { encoding: "utf8", mode: skill.fileStats.mode & 0o777 });
+  await rename(tmpFile, skill.filePath);
+  const nextStats = await stat(skill.filePath);
+  const metadata = parseSkillFrontmatter(body.content, skill.filePath);
+  return {
+    name: metadata.name || skill.name,
+    description: metadata.description || skill.description || "",
+    path: skill.filePath,
+    mtimeMs: nextStats.mtimeMs,
+    size: nextStats.size,
+    enabled: skill.enabled === true,
+  };
+}
+
 function getResourcePatternForSkill(tab, skill) {
   const info = skill.sourceInfo || {};
   const baseDir = info.baseDir || (info.scope === "project" ? path.join(tab?.cwd || options.cwd, ".pi") : agentDir);
@@ -5685,6 +5789,20 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/skill-file" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
+      sendJson(res, 200, { ok: true, data: await getSkillFileData(tab, { name: url.searchParams.get("name"), path: url.searchParams.get("path") }) });
+      return;
+    }
+
+    if (url.pathname === "/api/skill-file" && req.method === "POST") {
+      if (!isLocalAddress(req.socket.remoteAddress)) throw makeHttpError(403, "Saving skill files is only allowed from localhost");
+      const body = await readJsonBody(req, { limitBytes: SKILL_FILE_BODY_LIMIT_BYTES });
+      const tab = getRequestedTab(req, url, body);
+      sendJson(res, 200, { ok: true, data: await saveSkillFileData(tab, body) });
+      return;
+    }
+
     if (url.pathname === "/api/settings" && req.method === "GET") {
       const tab = getRequestedTab(req, url);
       sendJson(res, 200, { ok: true, data: nativeSettingsPayload(settingsManagerForTab(tab)) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "homepage": "https://github.com/Firstp1ck/npm-packages/tree/main/pi-package-webui#readme",

package/public/app.js

@@ -31,6 +31,16 @@ const elements = {
   composerActionsButton: $("#composerActionsButton"),
   composerActionsPanel: $("#composerActionsPanel"),
   promptInput: $("#promptInput"),
+  busyPromptBehaviorTag: $("#busyPromptBehaviorTag"),
+  busyPromptBehaviorMenu: $("#busyPromptBehaviorMenu"),
+  sessionSkillTags: $("#sessionSkillTags"),
+  skillEditorDialog: $("#skillEditorDialog"),
+  skillEditorTitle: $("#skillEditorTitle"),
+  skillEditorMeta: $("#skillEditorMeta"),
+  skillEditorText: $("#skillEditorText"),
+  skillEditorStatus: $("#skillEditorStatus"),
+  skillEditorCancelButton: $("#skillEditorCancelButton"),
+  skillEditorSaveButton: $("#skillEditorSaveButton"),
   sendButton: $("#sendButton"),
   commandSuggest: $("#commandSuggest"),
   attachmentTray: $("#attachmentTray"),
@@ -174,6 +184,7 @@ let activeTabGeneration = 0;
 let tabDrafts = new Map();
 let tabAttachments = new Map();
 let activeTextAttachmentEditor = null;
+let activeSkillEditor = null;
 let tabActivities = new Map();
 let tabSeenCompletionSerials = new Map();
 let streamBubble = null;
@@ -213,6 +224,8 @@ let openTerminalTabGroupKey = null;
 let newTabMenuOpen = false;
 let nativeCommandMenuOpen = false;
 let appRunnerMenuOpen = false;
+let busyPromptBehaviorMenuOpen = false;
+const skillUsageByTab = new Map();
 let appRunnerCustomDraft = { id: "", label: "", command: "./", path: "", args: "" };
 let appRunnerFileBrowserState = { open: false, loading: false, path: "", data: null, error: "" };
 let optionsMenuOpen = false;
@@ -299,6 +312,8 @@ const TAB_STORAGE_KEY = "pi-webui-active-tab";
 const PATH_FAST_PICKS_STORAGE_KEY = "pi-webui-path-fast-picks";
 const AGENT_DONE_NOTIFICATIONS_STORAGE_KEY = "pi-webui-agent-done-notifications";
 const THINKING_VISIBILITY_STORAGE_KEY = "pi-webui-thinking-visible";
+const BUSY_PROMPT_BEHAVIOR_STORAGE_KEY = "pi-webui-busy-prompt-behavior";
+const SKILL_USAGE_STORAGE_KEY = "pi-webui-skill-usage-v1";
 const TERMINAL_TABS_LAYOUT_STORAGE_KEY = "pi-webui-terminal-tabs-layout";
 const TOOL_OUTPUT_EXPANDED_STORAGE_KEY = "pi-webui-tool-output-expanded";
 const THEME_STORAGE_KEY = "pi-webui-theme";
@@ -331,6 +346,10 @@ const BACKGROUND_IMAGE_MIME_TYPES = new Set(["image/png", "image/jpeg", "image/w
 const DEFAULT_THEME_NAME = "catppuccin-mocha";
 const TERMINAL_TABS_LAYOUTS = new Set(["top", "left"]);
 const TERMINAL_TABS_LAYOUT_LABELS = { top: "Top bar", left: "Left sidebar" };
+const BUSY_PROMPT_BEHAVIOR_VALUES = new Set(["followUp", "steer"]);
+const BUSY_PROMPT_BEHAVIOR_LABELS = { followUp: "Follow-up", steer: "Steer" };
+const SKILL_TAG_MAX_VISIBLE = 6;
+const SKILL_USAGE_LIMIT_PER_TAB = 32;
 const MOBILE_VIEW_QUERY = "(max-width: 720px), (max-device-width: 720px), (pointer: coarse) and (hover: none)";
 const SIDE_PANEL_OVERLAY_QUERY = "(max-width: 1050px), (max-device-width: 720px), (pointer: coarse) and (hover: none)";
 const CHAT_BOTTOM_THRESHOLD_PX = 96;
@@ -905,6 +924,454 @@ function restoreThinkingVisibilitySetting() {
   renderThinkingVisibilityToggle();
 }
 
+function normalizeBusyPromptBehavior(value) {
+  const normalized = String(value || "").trim();
+  if (normalized === "follow-up" || normalized.toLowerCase() === "followup") return "followUp";
+  return BUSY_PROMPT_BEHAVIOR_VALUES.has(normalized) ? normalized : "followUp";
+}
+
+function readStoredBusyPromptBehavior() {
+  try {
+    return normalizeBusyPromptBehavior(localStorage.getItem(BUSY_PROMPT_BEHAVIOR_STORAGE_KEY));
+  } catch {
+    return "followUp";
+  }
+}
+
+function persistBusyPromptBehavior(behavior) {
+  try {
+    localStorage.setItem(BUSY_PROMPT_BEHAVIOR_STORAGE_KEY, normalizeBusyPromptBehavior(behavior));
+  } catch {
+    // Ignore storage failures; the setting should still work for this page load.
+  }
+}
+
+function busyPromptBehaviorMenuItems() {
+  return Array.from(elements.busyPromptBehaviorMenu?.querySelectorAll("[data-busy-prompt-behavior]") || []);
+}
+
+function renderBusyPromptBehaviorMenu() {
+  const behavior = normalizeBusyPromptBehavior(busyPromptBehavior);
+  for (const item of busyPromptBehaviorMenuItems()) {
+    const checked = normalizeBusyPromptBehavior(item.dataset.busyPromptBehavior) === behavior;
+    item.setAttribute("aria-checked", checked ? "true" : "false");
+    item.classList.toggle("active", checked);
+  }
+}
+
+function normalizeSkillName(value) {
+  const raw = String(value || "").trim().replace(/^\/?skill:/i, "");
+  if (!raw) return "";
+  const match = raw.match(/^[a-z0-9][a-z0-9._-]{0,63}$/i);
+  return match ? match[0].toLowerCase() : "";
+}
+
+function skillUsageMapForTab(tabId = activeTabId, { create = true } = {}) {
+  if (!tabId) return null;
+  let map = skillUsageByTab.get(tabId);
+  if (!map && create) {
+    map = new Map();
+    skillUsageByTab.set(tabId, map);
+  }
+  return map || null;
+}
+
+function clearSkillUsageForTab(tabId = activeTabId) {
+  if (!tabId) return;
+  skillUsageByTab.delete(tabId);
+  persistSkillUsage();
+  if (tabId === activeTabId) renderSessionSkillTags(tabId);
+}
+
+function sortedSkillUsageEntries(tabId = activeTabId) {
+  const map = skillUsageMapForTab(tabId, { create: false });
+  if (!map) return [];
+  return [...map.values()].sort((a, b) => b.lastSeenAt - a.lastSeenAt || a.name.localeCompare(b.name));
+}
+
+function serializeSkillUsageEntry(entry) {
+  const name = normalizeSkillName(entry?.name || "");
+  if (!name) return null;
+  const kinds = entry?.kinds instanceof Set ? [...entry.kinds] : Array.isArray(entry?.kinds) ? entry.kinds : [];
+  const paths = entry?.paths instanceof Set ? [...entry.paths] : Array.isArray(entry?.paths) ? entry.paths : [];
+  const sources = entry?.sources instanceof Set ? [...entry.sources] : Array.isArray(entry?.sources) ? entry.sources : [];
+  const path = entry?.path || paths[paths.length - 1] || "";
+  return {
+    name,
+    firstSeenAt: Number.isFinite(entry?.firstSeenAt) ? entry.firstSeenAt : Date.now(),
+    lastSeenAt: Number.isFinite(entry?.lastSeenAt) ? entry.lastSeenAt : Date.now(),
+    kinds: kinds.includes("read") ? kinds : [...kinds, "read"],
+    sources: sources.slice(-12),
+    path,
+    paths: [...new Set([path, ...paths].filter(Boolean))].slice(-8),
+  };
+}
+
+function persistSkillUsage() {
+  try {
+    const storedTabs = {};
+    for (const [tabId, map] of skillUsageByTab.entries()) {
+      const entries = [...map.values()]
+        .filter((entry) => entry?.kinds?.has("read"))
+        .map(serializeSkillUsageEntry)
+        .filter(Boolean)
+        .slice(0, SKILL_USAGE_LIMIT_PER_TAB);
+      if (entries.length) storedTabs[tabId] = entries;
+    }
+    localStorage.setItem(SKILL_USAGE_STORAGE_KEY, JSON.stringify({ version: 1, tabs: storedTabs }));
+  } catch {
+    // Ignore storage failures; tags still work for the current page lifetime.
+  }
+}
+
+function restoreStoredSkillUsage() {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(SKILL_USAGE_STORAGE_KEY) || "{}");
+    const storedTabs = parsed?.tabs && typeof parsed.tabs === "object" ? parsed.tabs : {};
+    for (const [tabId, entries] of Object.entries(storedTabs)) {
+      if (!tabId || !Array.isArray(entries)) continue;
+      const map = skillUsageMapForTab(tabId);
+      if (!map) continue;
+      for (const stored of entries.slice(0, SKILL_USAGE_LIMIT_PER_TAB)) {
+        const name = normalizeSkillName(stored?.name || "");
+        if (!name) continue;
+        const kinds = new Set(Array.isArray(stored?.kinds) ? stored.kinds : ["read"]);
+        if (!kinds.has("read")) continue;
+        const paths = new Set(Array.isArray(stored?.paths) ? stored.paths.filter(Boolean) : []);
+        if (stored?.path) paths.add(stored.path);
+        map.set(name, {
+          name,
+          firstSeenAt: Number.isFinite(stored?.firstSeenAt) ? stored.firstSeenAt : Date.now(),
+          lastSeenAt: Number.isFinite(stored?.lastSeenAt) ? stored.lastSeenAt : Date.now(),
+          kinds,
+          sources: new Set(Array.isArray(stored?.sources) ? stored.sources : ["stored"]),
+          path: stored?.path || [...paths].at(-1) || "",
+          paths,
+        });
+      }
+    }
+  } catch {
+    // Ignore corrupt stored tag data.
+  }
+}
+
+function pruneSkillUsageForKnownTabs(tabIds) {
+  let changed = false;
+  for (const tabId of skillUsageByTab.keys()) {
+    if (tabIds.has(tabId)) continue;
+    skillUsageByTab.delete(tabId);
+    changed = true;
+  }
+  if (changed) persistSkillUsage();
+}
+
+function skillInfoFromPath(pathText) {
+  const normalized = String(pathText || "").trim().replace(/\\/g, "/");
+  const match = normalized.match(/\/skills\/([^/]+)\/SKILL\.md$/i);
+  const name = normalizeSkillName(match?.[1] || "");
+  return name ? { name, path: normalized } : null;
+}
+
+function skillNameFromPath(pathText) {
+  return skillInfoFromPath(pathText)?.name || "";
+}
+
+function skillNamesFromSlashCommands(text) {
+  const names = new Set();
+  for (const match of String(text || "").matchAll(/\/skill:([a-z0-9][a-z0-9._-]{0,63})/gi)) {
+    const normalized = normalizeSkillName(match[1]);
+    if (normalized) names.add(normalized);
+  }
+  return [...names];
+}
+
+function skillKindsLabel(entry) {
+  return entry?.kinds?.has("read") ? "context read" : "tracked";
+}
+
+function renderSessionSkillTags(tabId = activeTabId) {
+  const container = elements.sessionSkillTags;
+  if (!container) return;
+  const entries = sortedSkillUsageEntries(tabId).filter((entry) => entry.kinds.has("read"));
+  container.replaceChildren();
+  if (!entries.length) {
+    container.hidden = true;
+    return;
+  }
+  const visible = entries.slice(0, SKILL_TAG_MAX_VISIBLE);
+  for (const entry of visible) {
+    const classes = ["composer-skill-tag", "read"];
+    const tag = make("button", classes.join(" "), entry.name);
+    tag.type = "button";
+    tag.dataset.skillName = entry.name;
+    tag.dataset.skillPath = skillPathForEntry(entry);
+    tag.title = `Open and edit skill ${entry.name} (${skillKindsLabel(entry)}) tracked in this tab/session.`;
+    tag.setAttribute("aria-label", `Open skill ${entry.name}`);
+    tag.addEventListener("click", () => openSkillEditor(entry));
+    container.append(tag);
+  }
+  if (entries.length > visible.length) {
+    const overflow = make("span", "composer-skill-tag overflow", `+${entries.length - visible.length}`);
+    overflow.title = `${entries.length - visible.length} more tracked skill${entries.length - visible.length === 1 ? "" : "s"}.`;
+    container.append(overflow);
+  }
+  container.hidden = false;
+}
+
+function trackSkillUsage(tabId, skillName, kind = "used", source = "", details = {}) {
+  const name = normalizeSkillName(skillName);
+  if (!tabId || !name) return;
+  const map = skillUsageMapForTab(tabId);
+  if (!map) return;
+  const now = Date.now();
+  const entry = map.get(name) || { name, firstSeenAt: now, lastSeenAt: now, kinds: new Set(), sources: new Set(), paths: new Set() };
+  entry.lastSeenAt = now;
+  if (["used", "loaded", "read"].includes(kind)) entry.kinds.add(kind);
+  else entry.kinds.add("used");
+  if (source) entry.sources.add(source);
+  if (details?.path) {
+    entry.path = details.path;
+    entry.paths ||= new Set();
+    entry.paths.add(details.path);
+  }
+  map.set(name, entry);
+  if (map.size > SKILL_USAGE_LIMIT_PER_TAB) {
+    const keep = [...map.values()].sort((a, b) => b.lastSeenAt - a.lastSeenAt).slice(0, SKILL_USAGE_LIMIT_PER_TAB);
+    map.clear();
+    for (const item of keep) map.set(item.name, item);
+  }
+  persistSkillUsage();
+  if (tabId === activeTabId) renderSessionSkillTags(tabId);
+}
+
+function trackSkillsFromText(tabId, text, { kind = "used", source = "" } = {}) {
+  // Intentionally do not tag /skill:name mentions. A skill tag means the
+  // agent read that skill's full SKILL.md context, not only its command/name.
+}
+
+function trackSkillsFromValue(tabId, value, { keyHint = "", kind = "used", source = "", depth = 0 } = {}) {
+  if (!tabId || value === undefined || value === null || depth > 5) return;
+  if (Array.isArray(value)) {
+    for (const item of value) trackSkillsFromValue(tabId, item, { keyHint, kind, source, depth: depth + 1 });
+    return;
+  }
+  if (typeof value === "string") {
+    const skillInfo = skillInfoFromPath(value);
+    if (skillInfo) trackSkillUsage(tabId, skillInfo.name, "read", source, { path: skillInfo.path });
+    return;
+  }
+  if (typeof value !== "object") return;
+  for (const [key, nested] of Object.entries(value)) {
+    const hint = String(key || "").toLowerCase();
+    trackSkillsFromValue(tabId, nested, { keyHint: hint, kind, source, depth: depth + 1 });
+  }
+}
+
+function trackSkillsFromToolInvocation(tabId, toolName, args, { sourcePrefix = "tool" } = {}) {
+  if (!tabId) return;
+  const name = String(toolName || "").trim();
+  if (name.toLowerCase() !== "read") return;
+  const source = `${sourcePrefix}:${name}`;
+  trackSkillsFromValue(tabId, args, { kind: "read", source });
+}
+
+function trackSkillsFromMessage(tabId, message) {
+  if (!tabId || !message) return;
+  const role = String(message.role || "");
+  if (role === "toolExecution" || role === "toolCall") {
+    trackSkillsFromToolInvocation(tabId, message.toolName || message.name, message.arguments ?? message.args ?? {}, { sourcePrefix: `message:${role}` });
+    return;
+  }
+  if (role === "user" || role === "assistant" || role === "assistantEvent" || role === "native") {
+    trackSkillsFromText(tabId, textFromContent(message.content), { kind: "used", source: `message:${role}` });
+    return;
+  }
+  if (role === "bashExecution") {
+    trackSkillsFromText(tabId, `${message.command || ""}\n${message.output || ""}`, { kind: "used", source: "message:bash" });
+  }
+}
+
+function trackSkillsFromMessages(messages = latestMessages, tabId = activeTabId) {
+  for (const message of messages || []) trackSkillsFromMessage(tabId, message);
+}
+
+function trackSkillsFromEvent(event) {
+  const tabId = event?.tabId || activeTabId;
+  if (!tabId || !event) return;
+  if (["tool_execution_start", "tool_execution_update", "tool_execution_end"].includes(event.type)) {
+    trackSkillsFromToolInvocation(tabId, event.toolName, event.args, { sourcePrefix: `event:${event.type}` });
+    return;
+  }
+  if (event.type === "message_update") {
+    const update = event.assistantMessageEvent || {};
+    if (update.type === "toolcall_start") {
+      trackSkillsFromToolInvocation(tabId, update.name || update.toolName || update.toolCall?.name, update.arguments || update.args || update.toolCall?.arguments || {}, { sourcePrefix: "event:message_update" });
+    }
+    return;
+  }
+  if (event.type === "response" && event.command === "new_session") {
+    clearSkillUsageForTab(tabId);
+  }
+}
+
+function skillPathForEntry(entry) {
+  if (entry?.path) return entry.path;
+  if (entry?.paths instanceof Set && entry.paths.size) {
+    const paths = [...entry.paths];
+    return paths[paths.length - 1] || "";
+  }
+  return "";
+}
+
+function skillEditorApiPath({ name = "", path = "" } = {}) {
+  const params = new URLSearchParams();
+  if (name) params.set("name", name);
+  if (path) params.set("path", path);
+  const query = params.toString();
+  return query ? `/api/skill-file?${query}` : "/api/skill-file";
+}
+
+function setSkillEditorStatus(message = "", level = "muted") {
+  const status = elements.skillEditorStatus;
+  if (!status) return;
+  status.textContent = message;
+  status.className = `skill-editor-status ${level || "muted"}`;
+  status.hidden = !message;
+}
+
+function closeSkillEditor() {
+  if (elements.skillEditorDialog?.open) elements.skillEditorDialog.close();
+  else activeSkillEditor = null;
+}
+
+function updateSkillEditorMeta(data = activeSkillEditor || {}) {
+  if (!elements.skillEditorMeta) return;
+  const parts = [data.name ? `Skill: ${data.name}` : "Skill", data.path || "path unavailable"].filter(Boolean);
+  elements.skillEditorMeta.textContent = parts.join(" · ");
+}
+
+async function openSkillEditor(entry) {
+  const name = normalizeSkillName(entry?.name || "");
+  const path = skillPathForEntry(entry);
+  if (!name || !elements.skillEditorDialog || !elements.skillEditorText) return;
+  const tabId = activeTabId;
+  activeSkillEditor = { name, path, tabId, mtimeMs: null };
+  if (elements.skillEditorTitle) elements.skillEditorTitle.textContent = `Edit skill: ${name}`;
+  if (elements.skillEditorText) elements.skillEditorText.value = "";
+  if (elements.skillEditorSaveButton) elements.skillEditorSaveButton.disabled = true;
+  updateSkillEditorMeta(activeSkillEditor);
+  setSkillEditorStatus("Loading skill context…", "muted");
+  if (!elements.skillEditorDialog.open) elements.skillEditorDialog.showModal();
+
+  try {
+    const response = await api(skillEditorApiPath({ name, path }), { tabId });
+    if (activeSkillEditor?.tabId !== tabId || activeSkillEditor?.name !== name) return;
+    const data = response.data || {};
+    activeSkillEditor = { name: normalizeSkillName(data.name || name), path: data.path || path, tabId, mtimeMs: data.mtimeMs };
+    if (elements.skillEditorTitle) elements.skillEditorTitle.textContent = `Edit skill: ${activeSkillEditor.name}`;
+    if (elements.skillEditorText) elements.skillEditorText.value = data.content || "";
+    if (elements.skillEditorSaveButton) elements.skillEditorSaveButton.disabled = false;
+    updateSkillEditorMeta(activeSkillEditor);
+    setSkillEditorStatus("Edit this SKILL.md, then save. Reload the tab if title/description metadata should refresh immediately.", "muted");
+    queueMicrotask(() => elements.skillEditorText?.focus());
+  } catch (error) {
+    if (elements.skillEditorSaveButton) elements.skillEditorSaveButton.disabled = true;
+    setSkillEditorStatus(`Failed to open skill: ${error.message || String(error)}`, "error");
+  }
+}
+
+async function saveSkillEditor() {
+  if (!activeSkillEditor || !elements.skillEditorText || !elements.skillEditorSaveButton) return;
+  const editor = activeSkillEditor;
+  const previousLabel = elements.skillEditorSaveButton.textContent;
+  elements.skillEditorSaveButton.disabled = true;
+  elements.skillEditorSaveButton.textContent = "Saving…";
+  setSkillEditorStatus("Saving skill…", "muted");
+  try {
+    const response = await api("/api/skill-file", {
+      method: "POST",
+      tabId: editor.tabId,
+      body: {
+        name: editor.name,
+        path: editor.path,
+        mtimeMs: editor.mtimeMs,
+        content: elements.skillEditorText.value,
+      },
+    });
+    const data = response.data || {};
+    const savedName = normalizeSkillName(data.name || editor.name);
+    activeSkillEditor = { name: savedName, path: data.path || editor.path, tabId: editor.tabId, mtimeMs: data.mtimeMs };
+    const map = skillUsageMapForTab(editor.tabId, { create: false });
+    if (map && savedName !== editor.name) map.delete(editor.name);
+    trackSkillUsage(editor.tabId, savedName, "read", "skill-editor", { path: activeSkillEditor.path });
+    if (elements.skillEditorTitle) elements.skillEditorTitle.textContent = `Edit skill: ${savedName}`;
+    updateSkillEditorMeta(activeSkillEditor);
+    setSkillEditorStatus("Saved SKILL.md. Reload/restart affected tabs before relying on updated skill metadata or newly loaded instructions.", "ok");
+  } catch (error) {
+    setSkillEditorStatus(`Failed to save skill: ${error.message || String(error)}`, "error");
+  } finally {
+    elements.skillEditorSaveButton.textContent = previousLabel || "Save skill";
+    elements.skillEditorSaveButton.disabled = false;
+  }
+}
+
+function renderBusyPromptBehaviorTag() {
+  const tag = elements.busyPromptBehaviorTag;
+  if (!tag) return;
+  const behavior = normalizeBusyPromptBehavior(busyPromptBehavior);
+  const label = BUSY_PROMPT_BEHAVIOR_LABELS[behavior] || BUSY_PROMPT_BEHAVIOR_LABELS.followUp;
+  tag.textContent = label;
+  tag.classList.toggle("follow-up", behavior === "followUp");
+  tag.classList.toggle("steer", behavior === "steer");
+  tag.title = behavior === "steer"
+    ? "While Pi is running, normal prompt submit steers the active run. Click to change."
+    : "While Pi is running, normal prompt submit queues a follow-up. Click to change.";
+  tag.setAttribute("aria-label", tag.title);
+  renderBusyPromptBehaviorMenu();
+  renderSessionSkillTags(activeTabId);
+}
+
+function setBusyPromptBehaviorMenuOpen(open, { focusCurrent = false } = {}) {
+  busyPromptBehaviorMenuOpen = !!open;
+  elements.busyPromptBehaviorTag?.setAttribute("aria-expanded", busyPromptBehaviorMenuOpen ? "true" : "false");
+  elements.busyPromptBehaviorTag?.classList.toggle("menu-open", busyPromptBehaviorMenuOpen);
+  if (elements.busyPromptBehaviorMenu) elements.busyPromptBehaviorMenu.hidden = !busyPromptBehaviorMenuOpen;
+  if (!busyPromptBehaviorMenuOpen) return;
+  renderBusyPromptBehaviorMenu();
+  if (focusCurrent) {
+    requestAnimationFrame(() => {
+      const current = busyPromptBehaviorMenuItems().find((item) => item.getAttribute("aria-checked") === "true") || busyPromptBehaviorMenuItems()[0];
+      current?.focus({ preventScroll: true });
+    });
+  }
+}
+
+function focusBusyPromptBehaviorMenuItem(direction = 1) {
+  const items = busyPromptBehaviorMenuItems();
+  if (!items.length) return;
+  const currentIndex = Math.max(0, items.indexOf(document.activeElement));
+  const nextIndex = (currentIndex + direction + items.length) % items.length;
+  items[nextIndex].focus({ preventScroll: true });
+}
+
+function chooseBusyPromptBehaviorFromMenu(value) {
+  setBusyPromptBehavior(value);
+  setBusyPromptBehaviorMenuOpen(false);
+  focusPromptInput({ defer: true });
+}
+
+function setBusyPromptBehavior(value, { persist = true } = {}) {
+  const next = normalizeBusyPromptBehavior(value);
+  busyPromptBehavior = next;
+  webuiSettings = { ...webuiSettings, busyPromptBehavior: next };
+  if (persist) persistBusyPromptBehavior(next);
+  renderBusyPromptBehaviorTag();
+}
+
+function restoreBusyPromptBehaviorSetting() {
+  setBusyPromptBehavior(readStoredBusyPromptBehavior(), { persist: false });
+}
+
 function clampAutocompleteMaxVisible(value) {
   const number = Number(value);
   if (!Number.isFinite(number)) return 12;
@@ -917,6 +1384,7 @@ function applyNativeSettingsForBrowser(settings = {}, { syncThinkingVisibility =
   if (settings.autocompleteMaxVisible !== undefined) autocompleteMaxVisible = clampAutocompleteMaxVisible(settings.autocompleteMaxVisible);
   if (SETTINGS_DOUBLE_ESCAPE_OPTIONS.some((option) => option.value === settings.doubleEscapeAction)) doubleEscapeAction = settings.doubleEscapeAction;
   if (SETTINGS_TREE_FILTER_OPTIONS.includes(settings.treeFilterMode)) treeFilterMode = settings.treeFilterMode;
+  if (BUSY_PROMPT_BEHAVIOR_VALUES.has(settings.busyPromptBehavior)) setBusyPromptBehavior(settings.busyPromptBehavior);
   if (syncThinkingVisibility && typeof settings.hideThinkingBlock === "boolean") setThinkingOutputVisible(!settings.hideThinkingBlock);
 }
 
@@ -936,6 +1404,7 @@ function setComposerActionsOpen(open) {
     setNativeCommandMenuOpen(false);
     setAppRunnerMenuOpen(false);
     setOptionsMenuOpen(false);
+    setBusyPromptBehaviorMenuOpen(false);
   }
 }
 
@@ -993,6 +1462,7 @@ function updateComposerModeButtons() {
   elements.abortButton.textContent = abortRequestInFlight ? "Aborting…" : "Abort";
   elements.abortButton.title = abortAvailable ? "Abort the active Pi run (Esc or hold)" : "Abort is available while Pi is running";
   elements.abortButton.setAttribute("aria-label", elements.abortButton.title);
+  renderBusyPromptBehaviorTag();
   document.body.classList.toggle("pi-run-active", runActive || abortAvailable);
 }
 
@@ -2717,9 +3187,11 @@ function syncTabMetadata(nextTabs = []) {
       tabActivities.delete(tabId);
       tabSeenCompletionSerials.delete(tabId);
       actionFeedbackByTab.delete(tabId);
+      skillUsageByTab.delete(tabId);
       clearGitWorkflowForTab(tabId);
     }
   }
+  pruneSkillUsageForKnownTabs(liveIds);
 }
 
 function applyTabMetadata(tab) {
@@ -2926,7 +3398,7 @@ function restoreActiveDraft() {
 
 function focusPromptInput({ defer = false } = {}) {
   const focus = () => {
-    if (!elements.promptInput || elements.dialog.open || elements.pathPickerDialog.open || elements.nativeCommandDialog.open || elements.appRunnerInfoDialog?.open || elements.promptListDialog?.open || elements.attachmentTextDialog?.open || document.visibilityState === "hidden") return;
+    if (!elements.promptInput || elements.dialog.open || elements.pathPickerDialog.open || elements.nativeCommandDialog.open || elements.appRunnerInfoDialog?.open || elements.promptListDialog?.open || elements.attachmentTextDialog?.open || elements.skillEditorDialog?.open || document.visibilityState === "hidden") return;
     try {
       elements.promptInput.focus({ preventScroll: true });
     } catch {
@@ -3281,6 +3753,7 @@ async function refreshTabs({ selectStored = false } = {}) {
     setActiveTabId((requested && tabs.some((tab) => tab.id === requested) ? requested : stored && tabs.some((tab) => tab.id === stored) ? stored : tabs[0]?.id) || null, { remember: true });
   }
   rememberServerStartCwd(tabs.find((tab) => tab.id === activeTabId)?.cwd || tabs[0]?.cwd);
+  renderSessionSkillTags(activeTabId);
   renderTabs();
   return tabs;
 }
@@ -10205,7 +10678,7 @@ async function openNativeSettingsDialog() {
       if (controls.steering.select.value !== (state.steeringMode || "one-at-a-time")) requests.push(nativeCommandApi("/api/steering-mode", { method: "POST", body: { mode: controls.steering.select.value } }));
       if (controls.followUp.select.value !== (state.followUpMode || "one-at-a-time")) requests.push(nativeCommandApi("/api/follow-up-mode", { method: "POST", body: { mode: controls.followUp.select.value } }));
       if (controls.autoCompact.input.checked !== (state.autoCompactionEnabled !== false)) requests.push(nativeCommandApi("/api/auto-compaction", { method: "POST", body: { enabled: controls.autoCompact.input.checked } }));
-      busyPromptBehavior = controls.busyBehavior.select.value;
+      setBusyPromptBehavior(controls.busyBehavior.select.value);
       if (controls.thinkingOutput.input.checked !== thinkingOutputVisible) setThinkingOutputVisible(controls.thinkingOutput.input.checked);
       if (controls.doneNotifications.input.checked !== agentDoneNotificationsEnabled) await setAgentDoneNotificationsEnabled(controls.doneNotifications.input.checked);
       await Promise.all(requests);
@@ -10678,6 +11151,7 @@ function renderMessages(messages) {
   cleanupLiveToolRunsForMessages(latestMessages);
   syncLastUserPromptFromMessages(latestMessages);
   syncPromptHistoryFromMessages(latestMessages);
+  trackSkillsFromMessages(latestMessages, activeTabId);
   renderAllMessages();
   renderFooter();
   renderFeedbackTray();
@@ -11927,7 +12401,7 @@ async function sendPrompt(kind = "prompt", explicitMessage, { targetTabId = acti
   }
 
   const targetWasStreaming = !!currentState?.isStreaming;
-  const busyBehavior = busyPromptBehavior || "followUp";
+  const busyBehavior = normalizeBusyPromptBehavior(busyPromptBehavior);
   const startsRun = kind === "prompt" && !targetWasStreaming;
   autoFollowChat = true;
   updateJumpToLatestButton();
@@ -12188,6 +12662,7 @@ function handleInactiveTabEvent(event) {
 
 function handleEvent(event) {
   ingestEventTabActivity(event);
+  trackSkillsFromEvent(event);
   if (!eventTargetsActiveTab(event)) {
     handleInactiveTabEvent(event);
     return;
@@ -12485,6 +12960,20 @@ elements.attachmentTextDialog?.addEventListener("keydown", (event) => {
   if (!elements.attachmentTextSaveButton?.disabled) saveTextAttachmentEdit();
 });
 elements.attachmentTextDialog?.querySelector("form")?.addEventListener("submit", (event) => event.preventDefault());
+elements.skillEditorCancelButton?.addEventListener("click", closeSkillEditor);
+elements.skillEditorSaveButton?.addEventListener("click", saveSkillEditor);
+elements.skillEditorText?.addEventListener("input", () => setSkillEditorStatus("Unsaved skill edits.", "warn"));
+elements.skillEditorDialog?.addEventListener("close", () => {
+  activeSkillEditor = null;
+  if (elements.skillEditorText) elements.skillEditorText.value = "";
+  setSkillEditorStatus("");
+});
+elements.skillEditorDialog?.addEventListener("keydown", (event) => {
+  if (!(event.ctrlKey || event.metaKey) || event.altKey || event.shiftKey || event.key.toLowerCase() !== "s") return;
+  event.preventDefault();
+  if (!elements.skillEditorSaveButton?.disabled) saveSkillEditor();
+});
+elements.skillEditorDialog?.querySelector("form")?.addEventListener("submit", (event) => event.preventDefault());
 elements.sendFeedbackButton.addEventListener("click", () => submitQueuedActionFeedback());
 elements.composer.addEventListener("submit", (event) => {
   event.preventDefault();
@@ -12493,6 +12982,56 @@ elements.composer.addEventListener("submit", (event) => {
 elements.composerActionsButton.addEventListener("click", () => {
   setComposerActionsOpen(!document.body.classList.contains("composer-actions-open"));
 });
+elements.busyPromptBehaviorTag?.addEventListener("click", (event) => {
+  event.preventDefault();
+  const nextOpen = !busyPromptBehaviorMenuOpen;
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
+  setOptionsMenuOpen(false);
+  setComposerActionsOpen(false);
+  setBusyPromptBehaviorMenuOpen(nextOpen);
+});
+elements.busyPromptBehaviorTag?.addEventListener("keydown", (event) => {
+  if (!["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) return;
+  event.preventDefault();
+  const focusPrevious = event.key === "ArrowUp";
+  setBusyPromptBehaviorMenuOpen(true);
+  requestAnimationFrame(() => {
+    const items = busyPromptBehaviorMenuItems();
+    if (!items.length) return;
+    const currentIndex = Math.max(0, items.findIndex((item) => item.getAttribute("aria-checked") === "true"));
+    const targetIndex = focusPrevious ? (currentIndex - 1 + items.length) % items.length : currentIndex;
+    items[targetIndex]?.focus({ preventScroll: true });
+  });
+});
+elements.busyPromptBehaviorMenu?.addEventListener("click", (event) => {
+  const item = event.target?.closest?.("[data-busy-prompt-behavior]");
+  if (!item) return;
+  chooseBusyPromptBehaviorFromMenu(item.dataset.busyPromptBehavior);
+});
+elements.busyPromptBehaviorMenu?.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    setBusyPromptBehaviorMenuOpen(false);
+    elements.busyPromptBehaviorTag?.focus({ preventScroll: true });
+    return;
+  }
+  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    event.preventDefault();
+    focusBusyPromptBehaviorMenuItem(event.key === "ArrowDown" ? 1 : -1);
+    return;
+  }
+  if (event.key === "Home" || event.key === "End") {
+    event.preventDefault();
+    const items = busyPromptBehaviorMenuItems();
+    items[event.key === "Home" ? 0 : items.length - 1]?.focus({ preventScroll: true });
+    return;
+  }
+  if (event.key === "Tab") {
+    setBusyPromptBehaviorMenuOpen(false);
+  }
+});
 elements.steerButton.addEventListener("click", () => sendPromptFromModeButton("steer", elements.steerButton));
 elements.followUpButton.addEventListener("click", () => sendPromptFromModeButton("follow-up", elements.followUpButton));
 elements.terminalTabsToggleButton.addEventListener("click", () => {
@@ -12929,6 +13468,9 @@ document.addEventListener("pointerdown", (event) => {
   if (optionsMenuOpen && !event.target?.closest?.(".composer-options-menu")) {
     setOptionsMenuOpen(false);
   }
+  if (busyPromptBehaviorMenuOpen && !event.target?.closest?.(".composer-context-tags, .composer-busy-mode-menu")) {
+    setBusyPromptBehaviorMenuOpen(false);
+  }
   if (document.body.classList.contains("mobile-tabs-expanded") && !elements.tabBar.contains(event.target) && !elements.terminalTabsToggleButton.contains(event.target)) {
     setNewTabMenuOpen(false);
     setMobileTabsExpanded(false);
@@ -13029,6 +13571,11 @@ window.addEventListener("keydown", (event) => {
     setOptionsMenuOpen(false);
     return;
   }
+  if (busyPromptBehaviorMenuOpen) {
+    setBusyPromptBehaviorMenuOpen(false);
+    elements.busyPromptBehaviorTag?.focus({ preventScroll: true });
+    return;
+  }
   if (newTabMenuOpen) {
     setNewTabMenuOpen(false);
     return;
@@ -13181,6 +13728,8 @@ elements.promptInput.addEventListener("blur", () => {
 
 resizePromptInput();
 focusPromptInput({ defer: true });
+restoreStoredSkillUsage();
+restoreBusyPromptBehaviorSetting();
 updateComposerModeButtons();
 updateOptionalFeatureAvailability();
 renderAppRunnerControls();

package/public/index.html

@@ -85,6 +85,28 @@
         </section>
         <form id="composer" class="composer">
           <div class="composer-input-row">
+            <div class="composer-context-tags">
+              <button
+                id="busyPromptBehaviorTag"
+                class="composer-busy-mode-tag"
+                type="button"
+                aria-haspopup="menu"
+                aria-expanded="false"
+                aria-controls="busyPromptBehaviorMenu"
+                aria-live="polite"
+              >Follow-up</button>
+              <div id="sessionSkillTags" class="composer-skill-tags" aria-live="polite" hidden></div>
+            </div>
+            <div id="busyPromptBehaviorMenu" class="composer-busy-mode-menu" role="menu" aria-labelledby="busyPromptBehaviorTag" hidden>
+              <button class="composer-busy-mode-menu-item" type="button" role="menuitemradio" data-busy-prompt-behavior="followUp" aria-checked="true">
+                <span class="composer-busy-mode-menu-label">Follow-up</span>
+                <span class="composer-busy-mode-menu-description">Queue as the next prompt after this run.</span>
+              </button>
+              <button class="composer-busy-mode-menu-item" type="button" role="menuitemradio" data-busy-prompt-behavior="steer" aria-checked="false">
+                <span class="composer-busy-mode-menu-label">Steer</span>
+                <span class="composer-busy-mode-menu-description">Guide the active run immediately.</span>
+              </button>
+            </div>
             <textarea id="promptInput" rows="1" enterkeyhint="enter" placeholder="Ask Pi…" autofocus></textarea>
             <button
               id="attachButton"
@@ -508,6 +530,19 @@
       </form>
     </dialog>
 
+    <dialog id="skillEditorDialog" class="extension-dialog skill-editor-dialog">
+      <form method="dialog">
+        <h2 id="skillEditorTitle">Edit skill</h2>
+        <p id="skillEditorMeta" class="skill-editor-meta muted"></p>
+        <textarea id="skillEditorText" class="dialog-editor skill-editor-text" spellcheck="false" aria-label="Skill file contents"></textarea>
+        <p id="skillEditorStatus" class="skill-editor-status muted" role="status" aria-live="polite" hidden></p>
+        <menu>
+          <button id="skillEditorCancelButton" type="button">Cancel</button>
+          <button id="skillEditorSaveButton" class="primary" type="button">Save skill</button>
+        </menu>
+      </form>
+    </dialog>
+
     <dialog id="promptListDialog" class="extension-dialog prompt-list-dialog">
       <form method="dialog">
         <h2 id="promptListDialogTitle">Create prompt list</h2>

package/public/styles.css

@@ -3329,11 +3329,182 @@ summary { cursor: pointer; color: var(--warning); }
   opacity: 0.8;
 }
 .composer-input-row {
+  position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.55rem;
   align-items: stretch;
 }
+.composer-context-tags {
+  position: absolute;
+  top: -0.48rem;
+  left: 0.75rem;
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.32rem;
+  max-width: calc(100% - 4.5rem);
+}
+.composer-busy-mode-tag {
+  position: relative;
+  flex: 0 1 auto;
+  display: inline-flex;
+  align-items: center;
+  max-width: min(12rem, 100%);
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0.14rem 0.52rem;
+  border: 1px solid rgba(137, 180, 250, 0.34);
+  border-radius: 999px;
+  color: var(--ctp-blue);
+  background:
+    linear-gradient(120deg, rgba(137, 180, 250, 0.24), rgba(137, 180, 250, 0.08)),
+    var(--ctp-crust);
+  box-shadow: 0 0.42rem 1rem rgba(var(--ctp-crust-rgb), 0.42), 0 0 0.8rem rgba(137, 180, 250, 0.14);
+  cursor: pointer;
+  font-size: 0.62rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.composer-busy-mode-tag:hover,
+.composer-busy-mode-tag:focus-visible,
+.composer-busy-mode-tag.menu-open {
+  border-color: rgba(137, 180, 250, 0.62);
+  box-shadow: 0 0.42rem 1rem rgba(var(--ctp-crust-rgb), 0.42), 0 0 1rem rgba(137, 180, 250, 0.24);
+  transform: translateY(-1px);
+}
+.composer-busy-mode-tag.steer {
+  color: var(--ctp-mauve);
+  border-color: rgba(203, 166, 247, 0.38);
+  background:
+    linear-gradient(120deg, rgba(203, 166, 247, 0.26), rgba(203, 166, 247, 0.08)),
+    var(--ctp-crust);
+  box-shadow: 0 0.42rem 1rem rgba(var(--ctp-crust-rgb), 0.42), 0 0 0.8rem rgba(203, 166, 247, 0.16);
+}
+.composer-busy-mode-tag.steer:hover,
+.composer-busy-mode-tag.steer:focus-visible,
+.composer-busy-mode-tag.steer.menu-open {
+  border-color: rgba(203, 166, 247, 0.66);
+  box-shadow: 0 0.42rem 1rem rgba(var(--ctp-crust-rgb), 0.42), 0 0 1rem rgba(203, 166, 247, 0.26);
+}
+.composer-busy-mode-tag.follow-up {
+  color: var(--ctp-blue);
+  border-color: rgba(137, 180, 250, 0.38);
+}
+.composer-skill-tags {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.28rem;
+  min-width: 0;
+  overflow: hidden;
+}
+.composer-skill-tags[hidden] {
+  display: none !important;
+}
+.composer-skill-tag {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  max-width: 9.4rem;
+  overflow: hidden;
+  padding: 0.14rem 0.44rem;
+  border: 1px solid rgba(249, 226, 175, 0.34);
+  border-radius: 999px;
+  color: var(--ctp-yellow);
+  background:
+    linear-gradient(120deg, rgba(249, 226, 175, 0.24), rgba(166, 227, 161, 0.08)),
+    var(--ctp-crust);
+  box-shadow: 0 0.35rem 0.9rem rgba(var(--ctp-crust-rgb), 0.40), 0 0 0.6rem rgba(249, 226, 175, 0.14);
+  font-size: 0.58rem;
+  font-weight: 900;
+  letter-spacing: 0.06em;
+  line-height: 1.1;
+  text-align: left;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+button.composer-skill-tag:hover,
+button.composer-skill-tag:focus-visible {
+  border-color: rgba(148, 226, 213, 0.68);
+  box-shadow: 0 0.35rem 0.9rem rgba(var(--ctp-crust-rgb), 0.40), 0 0 0.9rem rgba(148, 226, 213, 0.24);
+  transform: translateY(-1px);
+}
+.composer-skill-tag.read {
+  color: var(--ctp-teal);
+  border-color: rgba(148, 226, 213, 0.36);
+}
+.composer-skill-tag.loaded {
+  color: var(--ctp-green);
+  border-color: rgba(166, 227, 161, 0.36);
+}
+.composer-skill-tag.overflow {
+  color: var(--ctp-subtext0);
+  border-color: rgba(166, 173, 200, 0.30);
+  background: linear-gradient(120deg, rgba(166, 173, 200, 0.22), rgba(166, 173, 200, 0.08)), var(--ctp-crust);
+}
+.composer-busy-mode-menu {
+  position: absolute;
+  top: auto;
+  bottom: calc(100% + 0.22rem);
+  left: 0.75rem;
+  z-index: 120;
+  display: flex;
+  flex-direction: column;
+  gap: 0.34rem;
+  width: min(18rem, calc(100% - 4.5rem));
+  padding: 0.42rem;
+  border: 1px solid rgba(137, 180, 250, 0.32);
+  border-radius: 0.95rem;
+  background: var(--ctp-crust);
+  box-shadow: 0 0.9rem 2.2rem rgba(var(--ctp-crust-rgb), 0.72), 0 0 1rem rgba(137, 180, 250, 0.14), inset 0 1px 0 rgba(255,255,255,0.05);
+}
+.composer-busy-mode-menu[hidden] {
+  display: none !important;
+}
+.composer-busy-mode-menu-item {
+  display: grid;
+  gap: 0.1rem;
+  width: 100%;
+  margin: 0;
+  padding: 0.45rem 0.58rem;
+  border-color: rgba(137, 180, 250, 0.24);
+  border-radius: 0.72rem;
+  color: var(--ctp-text);
+  background:
+    linear-gradient(120deg, rgba(137, 180, 250, 0.08), rgba(203, 166, 247, 0.06)),
+    var(--ctp-mantle);
+  text-align: left;
+}
+.composer-busy-mode-menu-item:hover,
+.composer-busy-mode-menu-item:focus-visible {
+  border-color: rgba(148, 226, 213, 0.48);
+  box-shadow: 0 0 0.8rem rgba(148, 226, 213, 0.14);
+  transform: translateY(-1px);
+}
+.composer-busy-mode-menu-item[aria-checked="true"] {
+  border-color: rgba(148, 226, 213, 0.52);
+  background:
+    linear-gradient(120deg, rgba(148, 226, 213, 0.18), rgba(137, 180, 250, 0.10)),
+    var(--ctp-mantle);
+}
+.composer-busy-mode-menu-label {
+  font-size: 0.76rem;
+  font-weight: 900;
+  letter-spacing: 0.04em;
+}
+.composer-busy-mode-menu-description {
+  color: var(--muted);
+  font-size: 0.68rem;
+  line-height: 1.25;
+}
 .composer-icon-button {
   display: inline-flex;
   align-items: center;
@@ -4129,6 +4300,46 @@ summary { cursor: pointer; color: var(--warning); }
   font-size: 0.72rem;
   font-weight: 800;
 }
+.extension-dialog.skill-editor-dialog {
+  --skill-editor-size: min(152rem, calc(100vw - 1.5rem), calc(var(--visual-viewport-height, 100dvh) - 1.5rem));
+  width: var(--skill-editor-size);
+  height: var(--skill-editor-size);
+  max-width: calc(100vw - 1.5rem);
+  max-height: calc(var(--visual-viewport-height, 100dvh) - 1.5rem);
+  aspect-ratio: 1 / 1;
+}
+.skill-editor-dialog form {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+  gap: 0.78rem;
+  height: 100%;
+  min-height: 0;
+}
+.skill-editor-meta {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: 0.82rem;
+}
+.skill-editor-text {
+  min-height: 0;
+  resize: none;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+  font-size: 0.82rem;
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+.skill-editor-status {
+  margin: 0;
+  min-height: 1.2rem;
+  font-size: 0.84rem;
+}
+.skill-editor-status.ok { color: var(--ctp-green); }
+.skill-editor-status.warn { color: var(--ctp-yellow); }
+.skill-editor-status.error { color: var(--ctp-red); }
 .prompt-list-dialog {
   width: min(58rem, calc(100vw - 2rem));
 }

package/tests/mobile-static.test.mjs

@@ -106,6 +106,11 @@ assert.match(html, /id="stickyUserPromptButton"/, "chat should expose a fixed la
 assert.match(html, /id="feedbackTray"/, "chat should expose a queued action-feedback tray");
 assert.match(html, /id="sendFeedbackButton"/, "action feedback should be submittable after the agent finishes");
 assert.match(html, /<textarea id="promptInput"[^>]*rows="1"[^>]*enterkeyhint="enter"/, "prompt textarea should start at one row and hint that Return inserts a newline");
+assert.match(html, /id="busyPromptBehaviorTag"[\s\S]*class="composer-busy-mode-tag"[\s\S]*aria-controls="busyPromptBehaviorMenu"/, "composer should expose a clickable busy prompt behavior tag on the input frame");
+assert.doesNotMatch(html, /Busy send:/i, "busy prompt behavior tag should show only the current mode label");
+assert.match(html, /id="sessionSkillTags" class="composer-skill-tags"[\s\S]*hidden/, "composer should expose a hidden-until-used skill tag strip beside the busy mode tag");
+assert.match(html, /id="skillEditorDialog"[\s\S]*id="skillEditorText"[\s\S]*id="skillEditorSaveButton"/, "skill tags should have an in-Web UI SKILL.md editing dialog");
+assert.match(html, /id="busyPromptBehaviorMenu"[\s\S]*data-busy-prompt-behavior="followUp"[\s\S]*data-busy-prompt-behavior="steer"/, "busy prompt behavior dropdown should expose follow-up and steer choices");
 assert.match(app, /const LONG_INPUT_ATTACHMENT_LINE_THRESHOLD = 20/, "long composer text should use a 20-line threshold before becoming an attachment");
 assert.match(app, /function attachLongTextAsFile\(text, source = "input text"\)/, "long composer text should be attachable as a generated text file");
 assert.match(app, /function handleAttachmentPaste\(event\)[\s\S]*attachLongTextAsFile\(text, "clipboard text"\)/, "long pasted text should be attached instead of inserted into the prompt textarea");
@@ -173,6 +178,14 @@ assert.match(css, /\.composer-abort-button\.long-pressing::after[\s\S]*?animatio
 assert.match(css, /body\.pi-run-active:not\(\.mobile-keyboard-open\) \.composer-abort-button:not\(\[hidden\]\) \{ grid-column: span 2; \}/, "active mobile runs should keep Abort beside Send in the bottom controls");
 assert.match(css, /#promptInput \{[\s\S]*?min-height:\s*calc\(1\.5em \+ 1\.8rem\)/, "prompt input should default to a compact single-line height");
 assert.match(css, /#promptInput \{[\s\S]*?overflow-y:\s*hidden/, "prompt input should be JS-resized instead of showing a scrollbar by default");
+assert.match(css, /\.composer-context-tags \{[\s\S]*?top:\s*-0\.48rem;[\s\S]*?left:\s*0\.75rem;/, "busy prompt behavior and skill tags should sit at the top-left of the input frame");
+assert.match(css, /\.composer-busy-mode-tag \{[\s\S]*?var\(--ctp-crust\)/, "busy prompt behavior tag should use an opaque base background");
+assert.match(css, /\.composer-skill-tag \{[\s\S]*?var\(--ctp-crust\)/, "skill tags should use an opaque base background");
+assert.match(css, /button\.composer-skill-tag:hover,[\s\S]*?button\.composer-skill-tag:focus-visible/, "skill tags should be styled as clickable controls");
+assert.match(css, /\.extension-dialog\.skill-editor-dialog \{[\s\S]*?--skill-editor-size:\s*min\(152rem[\s\S]*?width:\s*var\(--skill-editor-size\);[\s\S]*?height:\s*var\(--skill-editor-size\);[\s\S]*?aspect-ratio:\s*1 \/ 1/, "skill editor should use a square viewport-bounded modal layout");
+assert.match(css, /\.skill-editor-dialog form \{[\s\S]*?height:\s*100%;[\s\S]*?min-height:\s*0/, "skill editor form should fill the square modal without forcing overflow");
+assert.match(css, /\.skill-editor-text \{[\s\S]*?overflow-x:\s*hidden;[\s\S]*?overflow-wrap:\s*anywhere;[\s\S]*?white-space:\s*pre-wrap/, "skill editor text should wrap long lines instead of horizontal scrolling");
+assert.match(css, /\.composer-busy-mode-menu \{[\s\S]*?bottom:\s*calc\(100% \+ 0\.22rem\);[\s\S]*?background:\s*var\(--ctp-crust\)/, "busy prompt behavior dropdown should expand above the tag with an opaque background");
 assert.match(css, /\.sticky-user-prompt-button \{[\s\S]*?grid-template-columns:\s*auto minmax\(0, 1fr\) auto/, "last-user-prompt jump control should render as a fixed transcript header");
 assert.match(css, /\.message\.extension,[\s\S]*?\.message\.native/, "extension and native command output should have visible transcript styling");
 assert.match(css, /\.message\.run-indicator-message \{[\s\S]*?border-color/, "active agent runs should render a visible transcript indicator card");
@@ -396,7 +409,7 @@ assert.match(app, /function syncMobileChatToBottomForInput\(\)/, "mobile input f
 assert.match(app, /function focusPromptInput\(\{ defer = false \} = \{\}\)/, "frontend should focus the prompt composer programmatically after tab/app startup");
 assert.match(app, /async function switchTab\(tabId\)[\s\S]*?restoreActiveDraft\(\);\n\s+focusPromptInput\(\{ defer: true \}\);/, "switching to a newly opened tab should focus the prompt input immediately");
 assert.match(app, /async function initializeTabs\(\)[\s\S]*?restoreActiveDraft\(\);[\s\S]*if \(!loadedTabs\.length\)[\s\S]*focusPromptInput\(\{ defer: true \}\);/, "starting the Web UI should prompt for cwd when needed and focus active tabs");
-assert.match(app, /resizePromptInput\(\);\nfocusPromptInput\(\{ defer: true \}\);\nupdateComposerModeButtons\(\);/, "startup should request prompt focus before waiting for tab state refreshes");
+assert.match(app, /resizePromptInput\(\);\nfocusPromptInput\(\{ defer: true \}\);\nrestoreStoredSkillUsage\(\);\nrestoreBusyPromptBehaviorSetting\(\);\nupdateComposerModeButtons\(\);/, "startup should request prompt focus and restore skill tags before waiting for tab state refreshes");
 assert.match(app, /elements\.promptInput\.addEventListener\("focus", \(\) => \{\n\s+syncMobileChatToBottomForInput\(\);/, "focusing mobile input should scroll output to bottom");
 assert.match(app, /navigator\.serviceWorker\.register\("\/service-worker\.js"\)/, "PWA service worker should be registered by the app");
 assert.match(app, /function serverStartCommandText\(\)[\s\S]*return `pi-webui\$\{currentPortArg\(\)\}`/, "PWA/offline shell should build a pathless pi-webui recovery command");
@@ -683,9 +696,29 @@ assert.match(app, /function updateComposerModeButtons\(\)/, "composer should rel
 assert.match(app, /const target = runActive \? elements\.composerRow : elements\.composerActionsPanel/, "Steer and Follow-up should move into the bottom row only while an agent run is active");
 assert.match(app, /const before = runActive \? elements\.abortButton : null/, "active Steer and Follow-up controls should sit before Abort and Send");
 assert.match(app, /button\.hidden = !runActive;\n\s+button\.disabled = !runActive;/, "Steer and Follow-up should be hidden and disabled when the agent is not running");
+assert.match(app, /renderBusyPromptBehaviorTag\(\);\n\s+document\.body\.classList\.toggle\("pi-run-active", runActive \|\| abortAvailable\)/, "composer mode refresh should keep the busy prompt behavior tag current");
 assert.match(app, /elements\.abortButton\.hidden = !abortAvailable;\n\s+elements\.abortButton\.disabled = !abortAvailable \|\| abortRequestInFlight;/, "Abort should only be exposed in the bottom bar while a run can be aborted");
 assert.match(app, /document\.body\.classList\.toggle\("pi-run-active", runActive \|\| abortAvailable\)/, "run-active or abort-available state should be reflected in CSS for mobile composer layout");
 assert.match(app, /function showComposerButtonTooltip\(button\)/, "empty mode-button taps should show the usage tooltip");
+assert.match(app, /function renderBusyPromptBehaviorTag\(\)[\s\S]*?tag\.textContent = label/, "busy prompt behavior tag should render only the current follow-up\/steer setting");
+assert.doesNotMatch(app, /Busy send: \$\{label\}/, "busy prompt behavior tag should not prefix the current mode label");
+assert.match(app, /function renderSessionSkillTags\(tabId = activeTabId\)[\s\S]*?filter\(\(entry\) => entry\.kinds\.has\("read"\)\)[\s\S]*?make\("button", classes\.join\(" "\), entry\.name\)[\s\S]*?openSkillEditor\(entry\)/, "skill tags should render as clickable buttons only after the full skill context was read");
+assert.ok(app.includes('normalized.match(/\\/skills\\/([^/]+)\\/SKILL\\.md$/i)'), "skill context tracking should require SKILL.md paths");
+assert.match(app, /function trackSkillsFromToolInvocation\(tabId, toolName[\s\S]*?name\.toLowerCase\(\) !== "read"\) return;[\s\S]*?kind: "read"/, "skill context tracking should only follow read-tool invocations");
+assert.match(app, /function trackSkillUsage\(tabId, skillName[\s\S]*?persistSkillUsage\(\);[\s\S]*?renderSessionSkillTags\(tabId\)/, "skill tags should persist and live-update when a read skill is tracked");
+assert.match(app, /const SKILL_USAGE_STORAGE_KEY = "pi-webui-skill-usage-v1"/, "read skill tags should have browser storage for hard-refresh and restart restore");
+assert.match(app, /function persistSkillUsage\(\)[\s\S]*?localStorage\.setItem\(SKILL_USAGE_STORAGE_KEY/, "read skill tags should be persisted to browser storage");
+assert.match(app, /function restoreStoredSkillUsage\(\)[\s\S]*?localStorage\.getItem\(SKILL_USAGE_STORAGE_KEY/, "read skill tags should restore from browser storage");
+assert.match(app, /restoreStoredSkillUsage\(\);[\s\S]*?initializeTabs\(\)/, "stored read skill tags should be restored before tabs initialize");
+assert.match(app, /trackSkillsFromEvent\(event\);[\s\S]*?if \(!eventTargetsActiveTab\(event\)\)/, "skill usage should be tracked as soon as tab events arrive");
+assert.doesNotMatch(app, /trackSkillsFromCommands\(rawAvailableCommands, tabContext\.tabId\)/, "loaded skill commands alone should not populate skill tags");
+assert.match(app, /function openSkillEditor\(entry\)[\s\S]*?api\(skillEditorApiPath\(\{ name, path \}\), \{ tabId \}\)/, "clicking a skill tag should load the corresponding SKILL.md into the editor dialog");
+assert.match(app, /function saveSkillEditor\(\)[\s\S]*?api\("\/api\/skill-file", \{[\s\S]*?method: "POST"[\s\S]*?content: elements\.skillEditorText\.value/, "skill editor should save changed SKILL.md contents through the API");
+assert.match(app, /skillEditorDialog\?\.addEventListener\("keydown"[\s\S]*?saveSkillEditor\(\)/, "skill editor should support Ctrl\/Cmd+S saving");
+assert.match(app, /function setBusyPromptBehaviorMenuOpen\(open,[\s\S]*aria-expanded[\s\S]*busyPromptBehaviorMenu\.hidden/, "busy prompt behavior tag should control a dropdown menu");
+assert.match(app, /busyPromptBehaviorTag\?\.addEventListener\("click"[\s\S]*setBusyPromptBehaviorMenuOpen\(nextOpen\)/, "clicking the busy prompt behavior tag should toggle its dropdown");
+assert.match(app, /busyPromptBehaviorMenu\?\.addEventListener\("click"[\s\S]*chooseBusyPromptBehaviorFromMenu/, "busy prompt behavior dropdown choices should update the setting");
+assert.match(app, /setBusyPromptBehavior\(controls\.busyBehavior\.select\.value\)/, "native settings should update the busy prompt behavior tag immediately");
 assert.match(app, /sendPromptFromModeButton\("steer", elements\.steerButton\)/, "Steer should show tooltip instead of silently doing nothing when input is empty");
 assert.match(app, /sendPromptFromModeButton\("follow-up", elements\.followUpButton\)/, "Follow-up should show tooltip instead of silently doing nothing when input is empty");
 assert.match(app, /function runPublishWorkflow\(command\)[\s\S]*?sendPrompt\("prompt", command\)/, "Publish workflows should send slash commands directly without replacing the draft");
@@ -969,6 +1002,12 @@ assert.match(server, /if \(webuiDevServer\) return installRoot/, "source-checkou
 assert.match(server, /Could not determine a safe optional feature install root/, "optional feature installs should fail closed when no declared package root can be found");
 assert.match(server, /url\.pathname === "\/api\/optional-feature-install" && req\.method === "POST"/, "server should expose optional feature install endpoint");
 assert.match(server, /Installing optional Web UI features is only allowed from localhost/, "optional feature install endpoint should be localhost-only");
+assert.match(server, /url\.pathname === "\/api\/skill-file" && req\.method === "GET"[\s\S]*?getSkillFileData/, "server should expose GET /api/skill-file for editable skill content");
+assert.match(server, /url\.pathname === "\/api\/skill-file" && req\.method === "POST"[\s\S]*?Saving skill files is only allowed from localhost[\s\S]*?saveSkillFileData/, "server should expose localhost-only POST /api/skill-file for saving skill content");
+assert.match(server, /function resolveEditableSkillFile\(tab, request = \{\}\)[\s\S]*?path\.basename\(skill\.filePath\) !== "SKILL\.md"/, "skill file API should validate that edits target resolved SKILL.md resources");
+assert.match(server, /function resolveExplicitSkillFilePath\(tab, filePath, requestedName = ""\)[\s\S]*?Skill path must point to \/skills\/<name>\/SKILL\.md[\s\S]*?allowedRoots/, "skill file API should allow exact read SKILL.md paths from trusted Pi skill roots");
+assert.match(server, /Skill path is outside allowed Pi skill locations/, "explicit skill path fallback should reject paths outside Pi skill roots");
+assert.match(server, /writeFile\(tmpFile, body\.content[\s\S]*?rename\(tmpFile, skill\.filePath\)/, "skill file saves should use an atomic temp-file rename");
 assert.match(server, /url\.pathname === "\/api\/themes" && req\.method === "GET"/, "server should expose GET /api/themes");
 assert.match(server, /readBundledThemes\(\)/, "server should read bundled theme JSON files for the browser");
 assert.match(server, /"apple-touch-icon\.png", "icon-192\.png"/, "server should serve the conventional apple touch icon path");