openclacky 1.3.3 → 1.3.4

data/lib/clacky/web/app.css

@@ -526,7 +526,7 @@ body {
 /* The sidebar sits on the outer frame (bg-primary) so it's visibly a layer
    BEHIND the chat surface (bg-secondary). Subtle right border separates them. */
 #sidebar {
-  --sidebar-width: 15rem;
+  --sidebar-width: 16rem;
   width: var(--sidebar-width);
   min-width: var(--sidebar-width);
   background: var(--color-bg-primary);
@@ -1938,7 +1938,7 @@ body {
    the slot has no panels for the current agent it stays empty and the whole
    column collapses to zero width. */
 #session-aside {
-  --session-aside-width: 360px;
+  --session-aside-width: 16rem;
   width: var(--session-aside-width);
   flex-shrink: 0;
   position: relative;
@@ -1976,7 +1976,7 @@ body {
   transition: background-color var(--transition-base);
 }
 .session-aside-resize:hover::after,
-.session-aside-resize.active::after { background: var(--color-accent-primary); }
+.session-aside-resize.active::after { background: transparent; }
 
 .session-aside-collapse {
   position: absolute;
@@ -2271,13 +2271,16 @@ body {
   /* Sit above the next message in case text would otherwise clip beneath it. */
   z-index: 1;
 }
-.msg:hover .msg-time {
+.msg:hover .msg-time,
+.msg-user-wrap:hover .msg-time {
   opacity: 1;
   transform: translateY(0);
 }
 /* Time color / alignment: anchor to the bubble's own side, let width be
    driven by content — prevents overflow on narrow bubbles. */
-.msg-user .msg-time      { display: none; }
+/* User timestamp: appended to .msg-user-wrap (not bubble), sits below action
+   buttons, right-aligned. */
+.msg-user-wrap > .msg-time { color: var(--color-text-secondary); top: auto; bottom: 0.2rem; right: 0; left: auto; padding-right: 0.25rem; }
 .msg-assistant .msg-time { color: var(--color-text-secondary); left: 0;  right: auto; padding-left: 0.25rem; }
 
 .msg-user      { background: var(--color-accent-soft); color: var(--color-text-primary); white-space: pre-wrap; }
@@ -2289,11 +2292,11 @@ body {
   position: relative;
   display: flex;
   justify-content: flex-end;
-  padding-bottom: 1.8rem;
+  padding-bottom: 3rem;
 }
 .msg-user-actions {
   position: absolute;
-  top: calc(100% - 1.5rem + 2px);
+  bottom: 1.1rem;
   right: 0;
   display: flex;
   gap: 0.125rem;
@@ -2305,6 +2308,7 @@ body {
 .msg-user-wrap:hover .msg-user-actions { opacity: 1; pointer-events: auto; }
 .msg-user-wrap:has(.msg-user.editing) { padding-bottom: 0; }
 .msg-user-wrap:has(.msg-user.editing) .msg-user-actions { display: none; }
+.msg-user-wrap:has(.msg-user.editing) .msg-time { display: none; }
 
 .msg-user-action-btn {
   display: inline-flex;
@@ -4583,7 +4587,6 @@ body {
   font-size: 0.8125rem;
   color: var(--color-text-primary);
   cursor: pointer;
-  margin-top: 0.5rem;
 }
 .model-field-checkbox input[type="checkbox"] {
   width: 15px;
@@ -4780,7 +4783,7 @@ body {
 /* ── Model Cards Grid Container ─────────────────────────────────────────────── */
 #model-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 1rem;
 }
 
@@ -6698,24 +6701,14 @@ body {
   white-space: nowrap;
 }
 .brand-skill-version.installed {
-  background: #1f3a5f;
-  color: #7eb8f7;
-  border: 1px solid #1d4070;
+  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
+  color: var(--color-accent-primary);
+  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
 }
 .brand-skill-version.latest {
-  background: #1f4e9e;
-  color: #bfdbfe;
-  border: 1px solid #1d4070;
-}
-[data-theme="light"] .brand-skill-version.installed {
-  background: #eff6ff;
-  color: #1d4ed8;
-  border: 1px solid #bfdbfe;
-}
-[data-theme="light"] .brand-skill-version.latest {
-  background: #1d4ed8;
+  background: var(--color-accent-primary);
   color: #ffffff;
-  border: 1px solid #1e40af;
+  border: 1px solid var(--color-accent-primary);
 }
 .brand-skill-update-arrow {
   color: var(--color-text-secondary);
@@ -6795,17 +6788,11 @@ body {
   border-color: var(--color-accent-primary);
 }
 .btn-brand-update {
-  background: #1f4e9e;
-  color: #bfdbfe;
-  border: 1px solid #1d4070;
-}
-.btn-brand-update:hover { background: #1a3f85; }
-[data-theme="light"] .btn-brand-update {
-  background: #1d4ed8;
+  background: var(--color-accent-primary);
   color: #ffffff;
-  border: 1px solid #1e40af;
+  border: 1px solid var(--color-accent-primary);
 }
-[data-theme="light"] .btn-brand-update:hover { background: #1e40af; }
+.btn-brand-update:hover { background: var(--color-accent-hover); }
 .btn-brand-install:disabled,
 .btn-brand-update:disabled {
   opacity: 0.5;
@@ -6846,6 +6833,22 @@ body {
   border-color: var(--color-error-border, #f5c6c6);
   background: var(--color-error-bg, #fff0f0);
 }
+.btn-skill-edit {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  padding: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  transition: color .15s, border-color .15s, background .15s;
+}
+.btn-skill-edit:hover {
+  color: var(--color-text-primary);
+  border-color: var(--color-border-primary);
+  background: var(--color-bg-hover);
+}
 
 
 /* ── CodeEditor (CodeMirror 6) Modal ────────────────────────────────────── */
@@ -7396,28 +7399,35 @@ body.setup-mode[data-theme="dark"] {
   transform: translateY(1px);
 }
 #setup-device-error {
-  margin-top: 0.5rem;
+  margin-top: 0;
+  min-height: 0;
 }
 #setup-device-error.result-fail { color: var(--color-error); }
 
 /* Manual-config collapsible (secondary path) */
-#setup-manual-details {
-  margin-top: 0.25rem;
-}
-#setup-manual-summary {
+#setup-manual-toggle {
+  display: block;
+  width: 100%;
+  margin-top: 0.5rem;
+  padding: 0.5rem 0;
+  background: none;
+  border: none;
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   color: var(--color-text-secondary);
   text-align: center;
-  list-style: none;
-  padding: 0.5rem 0;
+  text-decoration: underline;
+  text-underline-offset: 3px;
   user-select: none;
+  transition: color 0.15s;
 }
-#setup-manual-summary::-webkit-details-marker { display: none; }
-#setup-manual-summary:hover { color: var(--color-text-primary); }
-#setup-manual-details[open] #setup-manual-summary {
-  margin-bottom: 0.5rem;
-  border-bottom: 1px solid var(--color-border-primary);
+#setup-manual-toggle:hover {
+  color: var(--color-text-primary);
+}
+#setup-manual-section {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border-primary);
 }
 
 /* Bottom action row: [← Back]  [Test & Continue →] */
@@ -12113,16 +12123,3 @@ body.setup-mode[data-theme="dark"] {
   }
 }
 
-/* ════ Media output directory subsection (nested under #media-section) ════ */
-#media-output-dir-section.settings-subsection {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  max-width: 48rem;
-}
-#media-output-dir-section .settings-subsection-desc {
-  font-size: 0.8125rem;
-  color: var(--color-text-secondary);
-  line-height: 1.5;
-  margin: 0;
-}

data/lib/clacky/web/app.js

@@ -10,6 +10,14 @@
 // ── DOM helper (shared by all modules loaded after this) ──────────────────
 const $ = id => document.getElementById(id);
 
+// ── Inject X-Lang header into every fetch request ─────────────────────────
+const _nativeFetch = window.fetch;
+window.fetch = function(input, init = {}) {
+  const headers = new Headers(init.headers || {});
+  if (!headers.has("X-Lang")) headers.set("X-Lang", I18n.lang());
+  return _nativeFetch.call(this, input, { ...init, headers });
+};
+
 // ── Utilities (shared) ────────────────────────────────────────────────────
 function escapeHtml(str) {
   return String(str)
@@ -325,13 +333,53 @@ const Modal = (() => {
   /** Show a yes/no confirmation dialog. Returns a Promise<boolean>. */
   function confirm(message) {
     return new Promise(resolve => {
+      const overlay = $("modal-overlay");
+      $("modal-message").textContent = message;
+      $("modal-skip-label").style.display = "none";
+      $("modal-skip-cb").checked = false;
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
+
+      const cleanup = (result) => {
+        overlay.style.display = "none";
+        $("modal-yes").onclick = null;
+        $("modal-no").onclick  = null;
+        resolve(result);
+      };
+      $("modal-yes").onclick = () => cleanup(true);
+      $("modal-no").onclick  = () => cleanup(false);
+    });
+  }
+
+  /**
+   * Like confirm(), but shows a "don't show again" checkbox.
+   * If localStorage[storageKey] === "1", resolves true immediately.
+   * Returns Promise<boolean>.
+   */
+  function confirmOnce(storageKey, message, skipLabel) {
+    if (localStorage.getItem(storageKey) === "1") return Promise.resolve(true);
+
+    return new Promise(resolve => {
+      const overlay = $("modal-overlay");
       $("modal-message").textContent   = message;
-      $("modal-overlay").style.display = "flex";
+      $("modal-skip-text").textContent = skipLabel;
+      $("modal-skip-cb").checked       = false;
+      $("modal-skip-label").style.display = "flex";
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
 
       const cleanup = (result) => {
-        $("modal-overlay").style.display = "none";
+        overlay.style.display = "none";
+        $("modal-skip-label").style.display = "none";
         $("modal-yes").onclick = null;
         $("modal-no").onclick  = null;
+        if (result && $("modal-skip-cb").checked) {
+          localStorage.setItem(storageKey, "1");
+        }
         resolve(result);
       };
       $("modal-yes").onclick = () => cleanup(true);
@@ -342,10 +390,15 @@ const Modal = (() => {
   /** Show a text input prompt dialog. Returns a Promise<string|null>. */
   function prompt(message, defaultValue = "") {
     return new Promise(resolve => {
+      const overlay = $("prompt-modal-overlay");
       $("prompt-modal-message").textContent = message;
       const input = $("prompt-modal-input");
       input.value = defaultValue;
-      $("prompt-modal-overlay").style.display = "flex";
+      // Re-attach to <body> end so it stacks above dynamically-appended overlays.
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
       
       // Auto-focus and select all text
       setTimeout(() => {
@@ -375,10 +428,15 @@ const Modal = (() => {
   /** Show a rename dialog. Returns a Promise<string|null>. */
   function rename(currentName = "") {
     return new Promise(resolve => {
+      const overlay = $("rename-modal-overlay");
       const input = $("rename-modal-input");
       input.value = currentName;
       input.classList.remove("input-error");
-      $("rename-modal-overlay").style.display = "flex";
+      // Re-attach to <body> end so it stacks above dynamically-appended overlays.
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
       
       setTimeout(() => {
         input.focus();
@@ -423,7 +481,7 @@ const Modal = (() => {
     });
   }
 
-  return { confirm, prompt, rename };
+  return { confirm, confirmOnce, prompt, rename };
 })();
 
 // ── Toast helper ──────────────────────────────────────────────────────────
@@ -550,7 +608,7 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
   let startW = 0;
 
   // Restore saved width
-  const saved = localStorage.getItem("sidebar-width");
+  const saved = localStorage.getItem("clacky-sidebar-width");
   if (saved) {
     const w = parseFloat(saved);
     if (w >= MIN_W && w <= MAX_W) {
@@ -583,7 +641,7 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
     handle.classList.remove("active");
     document.body.style.cursor = "";
     document.body.style.userSelect = "";
-    localStorage.setItem("sidebar-width", _getWidth());
+    localStorage.setItem("clacky-sidebar-width", _getWidth());
   });
 })();
 

data/lib/clacky/web/components/onboard.js

@@ -110,6 +110,11 @@ const Onboard = (() => {
     $("setup-phase-key").style.display  = step === "key"  ? "" : "none";
     $("setup-dot-1").className = "setup-step" + (step === "lang" ? " active" : " done");
     $("setup-dot-2").className = "setup-step" + (step === "key"  ? " active" : "");
+    if (step === "key") {
+      $("setup-device-block").style.display   = "";
+      $("setup-manual-toggle").style.display  = "";
+      $("setup-manual-section").style.display = "none";
+    }
   }
 
   // Step 2 — API key setup
@@ -367,9 +372,20 @@ const Onboard = (() => {
 
     $("setup-btn-test").addEventListener("click", _testAndSave);
 
-    // Back to Step 1
+    $("setup-manual-toggle").addEventListener("click", () => {
+      $("setup-device-block").style.display  = "none";
+      $("setup-manual-toggle").style.display = "none";
+      $("setup-manual-section").style.display = "";
+    });
+
     $("setup-btn-back").addEventListener("click", () => {
-      _showSetupStep("lang");
+      if ($("setup-manual-section").style.display !== "none") {
+        $("setup-device-block").style.display  = "";
+        $("setup-manual-toggle").style.display = "";
+        $("setup-manual-section").style.display = "none";
+      } else {
+        _showSetupStep("lang");
+      }
     });
 
     _bindDeviceStep();

data/lib/clacky/web/core/aside.js

@@ -16,7 +16,7 @@
 (() => {
   const WIDTH_KEY = "clacky.aside.width";
   const OPEN_KEY  = "clacky.aside.open";
-  const MIN_W = 280;
+  const MIN_W = 256;
   const MAX_W = 720;
 
   const $ = (id) => document.getElementById(id);
@@ -31,8 +31,11 @@
     const opener  = $("btn-aside-open");
     const overlay = $("workspace-overlay");
     if (!aside) return;
-    let open = true;
-    try { open = localStorage.getItem(OPEN_KEY) !== "0"; } catch (_e) { /* ignore */ }
+    let open = false;
+    try {
+      const stored = localStorage.getItem(OPEN_KEY);
+      open = stored === null ? false : stored !== "0";
+    } catch (_e) { /* ignore */ }
     const empty = slotEmpty();
     aside.classList.toggle("collapsed", !open);
     if (opener)  opener.style.display = (!open && !empty) ? "" : "none";
@@ -64,6 +67,7 @@
       startX = e.clientX;
       startW = parseFloat(getComputedStyle(aside).getPropertyValue("--session-aside-width"));
       handle.classList.add("active");
+      aside.style.transition = "none";
       document.body.style.cursor = "col-resize";
       document.body.style.userSelect = "none";
     });
@@ -79,6 +83,7 @@
       if (!dragging) return;
       dragging = false;
       handle.classList.remove("active");
+      aside.style.transition = "";
       document.body.style.cursor = "";
       document.body.style.userSelect = "";
       const w = parseFloat(getComputedStyle(aside).getPropertyValue("--session-aside-width"));

data/lib/clacky/web/core/ext.js

@@ -313,7 +313,7 @@ Clacky.ext = (() => {
       btn.type = "button";
       btn.setAttribute("data-tab", id);
       const label = document.createElement("span");
-      label.textContent = entry.tab.label || id;
+      label.textContent = (typeof entry.tab.label === "function" ? entry.tab.label() : entry.tab.label) || id;
       btn.appendChild(label);
       if (entry.tab.badge != null) _setTabBadge(btn, entry.tab.badge);
       btn.addEventListener("click", () => activate(id));

data/lib/clacky/web/features/skills/store.js

@@ -268,6 +268,35 @@ const SkillsStore = (() => {
       return _openSessionWith(message || "/skill-creator");
     },
 
+    /** Fetch a custom skill's SKILL.md content. Returns { ok, content, path, error }. */
+    async fetchSkillContent(name) {
+      try {
+        const res  = await fetch(`/api/skills/${encodeURIComponent(name)}/content`);
+        const data = await res.json();
+        if (!data.ok) throw new Error(data.error || "Load failed");
+        return { ok: true, content: data.content || "", path: data.path };
+      } catch (e) {
+        return { ok: false, error: e.message };
+      }
+    },
+
+    /** Update a custom skill's SKILL.md content. Returns { ok, error }. */
+    async updateSkillContent(name, content) {
+      try {
+        const res  = await fetch(`/api/skills/${encodeURIComponent(name)}/content`, {
+          method:  "PUT",
+          headers: { "Content-Type": "application/json" },
+          body:    JSON.stringify({ content })
+        });
+        const data = await res.json();
+        if (!res.ok || !data.ok) throw new Error(data.error || "Save failed");
+        await Skills.load();
+        return { ok: true };
+      } catch (e) {
+        return { ok: false, error: e.message };
+      }
+    },
+
     /** Import a skill: validate url/path, open a session, run /skill-add. */
     async importSkill(url) {
       const trimmed = (url || "").trim();
@@ -286,8 +315,7 @@ const SkillsStore = (() => {
 
     // ── Cross-feature state resets (called by settings.js) ───────────────────
 
-    /** Reset to My Skills and clear brand state after license unbind. */
-    resetAfterUnbind() {
+    resetBrandState() {
       _brandSkills    = [];
       _brandActivated = false;
       _activeTab      = "my-skills";

data/lib/clacky/web/features/skills/view.js

@@ -114,6 +114,15 @@ const SkillsView = (() => {
            </svg>
          </button>`;
 
+    const editButtonHtml = isSystem
+      ? ""
+      : `<button class="btn-skill-edit" data-name="${escapeHtml(skill.name)}" title="${I18n.t("skills.btn.edit")}">
+           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+             <path d="M12 20h9"/>
+             <path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+           </svg>
+         </button>`;
+
     card.innerHTML = `
       <div class="skill-card-main">
         <div class="skill-card-info">
@@ -131,6 +140,7 @@ const SkillsView = (() => {
             <span class="skill-toggle-track"></span>
           </label>
           ${useButtonHtml}
+          ${editButtonHtml}
           ${deleteButtonHtml}
         </div>
       </div>
@@ -157,6 +167,12 @@ const SkillsView = (() => {
     const useBtn = card.querySelector(".btn-skill-use");
     if (useBtn) useBtn.addEventListener("click", () => Skills.useInstalledSkill(skill.name));
 
+    const editBtn = card.querySelector(".btn-skill-edit");
+    if (editBtn) editBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      _editSkill(skill);
+    });
+
     const deleteBtn = card.querySelector(".btn-skill-delete");
     if (deleteBtn) deleteBtn.addEventListener("click", (e) => {
       e.stopPropagation();
@@ -511,12 +527,27 @@ const SkillsView = (() => {
     },
 
     resetAfterUnbind() {
-      SkillsStore.resetAfterUnbind();
+      SkillsStore.resetBrandState();
       const panel = $("skills-panel");
       if (panel && panel.style.display !== "none") _applyTab("my-skills");
     },
   };
 
+  async function _editSkill(skill) {
+    const res = await Skills.fetchSkillContent(skill.name);
+    if (!res.ok) { alert(I18n.t("skills.editFail") + ": " + res.error); return; }
+
+    CodeEditor.open({
+      content: res.content,
+      title: skill.name,
+      language: "markdown",
+      onSave: async (newContent) => {
+        const r = await Skills.updateSkillContent(skill.name, newContent);
+        if (!r.ok) throw new Error(r.error);
+      }
+    });
+  }
+
   async function _doImportFromBar() {
     const input = $("skill-import-input");
     const bar   = $("skill-import-bar");

data/lib/clacky/web/features/workspace/view.js

@@ -294,7 +294,7 @@ const WorkspaceView = (() => {
 if (window.Clacky && Clacky.ext) {
   Clacky.ext.ui.mountBuiltin("session.aside", (ctx) => WorkspaceView.renderFilesTab(ctx), {
     order: 40,
-    tab: { id: "files", label: (typeof I18n !== "undefined" ? I18n.t("workspace.title") : "Files") },
+    tab: { id: "files", label: () => (typeof I18n !== "undefined" ? I18n.t("workspace.title") : "Files") },
   });
 }