openclacky 1.3.7 → 1.3.8

data/lib/clacky/web/app.css

@@ -221,6 +221,7 @@ html { font-size: 16px; }
   100% { background-position: -200% 0; }
 }
 .skel {
+  display: inline-block;
   border-radius: 6px;
   background: linear-gradient(90deg,
     #e8e8e8 25%,
@@ -1855,42 +1856,87 @@ body {
 /* ── New Session landing page (#new) ─────────────────────────────────────── */
 .new-session-page {
   justify-content: flex-start;
-  padding: 3rem 1.5rem 2rem;
-  overflow-y: auto;
+  padding: 0;
+  overflow: hidden;
   gap: 0;
 }
 .new-session-inner {
   width: 100%;
-  max-width: 44rem;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 0;
+}
+.new-session-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  width: 100%;
+  max-width: 60rem;
+  margin: 0 auto;
+  padding: 5.5rem 1.5rem 1rem;
+}
+.new-session-composer {
+  position: relative;
+  flex: none;
+  padding: 0.75rem 1.5rem 1.25rem;
 }
 .new-session-title {
   font-size: 1.5rem;
   font-weight: 680;
   color: var(--color-text-primary);
   letter-spacing: -0.01em;
-  text-align: center;
+  text-align: left;
   margin: 0;
 }
 .new-session-subtitle {
   color: var(--color-text-tertiary);
   font-size: 0.875rem;
-  text-align: center;
+  text-align: left;
   margin: 0;
 }
 .new-session-agents {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  grid-auto-rows: 1fr;
+  gap: 0.75rem;
+}
+.new-session-agent-panels {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
-  justify-content: flex-start;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: -0.625rem;
+  padding-left: 0.125rem;
+}
+.ns-panels-label {
+  width: 100%;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  margin-bottom: 0.0625rem;
+}
+.ns-panel-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.78125rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+.ns-panel-chip--panel {
+  background: var(--color-accent-soft);
+  color: var(--color-accent-primary);
+}
+.ns-panel-chip--skill {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border-primary);
 }
 .agent-card {
   position: relative;
-  flex: 1 1 12rem;
-  min-width: 11rem;
-  max-width: 15rem;
   padding: 0.9375rem 1rem;
   border: 1px solid var(--color-border-primary);
   border-radius: 0.75rem;
@@ -1918,6 +1964,35 @@ body {
   align-items: center;
   gap: 0.375rem;
 }
+.agent-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-bottom: 0.125rem;
+}
+.agent-card-avatar {
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--color-bg-hover);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.agent-card-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.agent-card-avatar--fallback {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-accent-primary);
+  background: var(--color-accent-soft);
+}
 .agent-card-new {
   font-size: 0.6rem;
   font-weight: 700;
@@ -1951,45 +2026,77 @@ body {
   color: var(--color-accent-primary);
 }
 .agent-card-author {
+  margin-top: 0.25rem;
   font-size: 0.72rem;
   color: var(--color-text-tertiary);
   opacity: 0.8;
 }
 
-.new-session-composer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+.new-session-input-bar {
+  margin: 0;
+  padding: 10px 12px;
   border: 1px solid var(--color-border-primary);
-  border-radius: 0.75rem;
-  padding: 0.75rem;
+  border-radius: 13px;
   background: var(--color-bg-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: var(--shadow-card);
+  transition: border-color .14s;
+}
+.new-session-input-bar:focus-within {
+  border-color: color-mix(in srgb, var(--color-accent-primary) 50%, var(--color-border-primary));
+}
+.new-session-composer-btn {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition: background .12s, color .12s;
+}
+.new-session-composer-btn:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
+}
+.new-session-composer-btn.active {
+  color: var(--color-accent-primary);
+  background: var(--color-accent-soft);
+}
+.new-session-composer-btn > span {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
 }
 .new-session-textarea {
-  width: 100%;
+  flex: 1;
   border: none;
   outline: none;
-  resize: vertical;
+  resize: none;
   background: transparent;
   color: var(--color-text-primary);
-  font: inherit;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  padding: 0.25rem;
-  min-height: 3rem;
-  max-height: 12rem;
-}
-.new-session-composer-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1.55;
+  padding: 4px 6px;
+  margin: 0;
+  max-height: 12.5rem;
+  overflow-y: auto;
+  scrollbar-width: none;
 }
+.new-session-textarea::-webkit-scrollbar { display: none; }
 .new-session-advanced-wrap {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   align-items: flex-start;
+  margin-top: -0.75rem;
 }
 .new-session-advanced-toggle {
   display: inline-flex;
@@ -2006,7 +2113,6 @@ body {
 }
 .new-session-advanced-toggle:hover {
   color: var(--color-text-secondary);
-  background: var(--color-bg-hover);
 }
 .new-session-advanced-caret {
   transition: transform 0.15s;
@@ -2015,22 +2121,30 @@ body {
   transform: rotate(180deg);
 }
 .new-session-send {
-  padding: 0.4375rem 1rem;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
   border: none;
-  border-radius: 0.5rem;
+  border-radius: 9px;
   background: var(--color-accent-primary);
-  color: var(--color-text-inverse, #fff);
-  font-size: 0.875rem;
-  font-weight: 550;
+  color: #fff;
   cursor: pointer;
-  transition: opacity 0.14s;
+  transition: background .12s, opacity .12s;
+}
+.new-session-send svg {
+  width: 15px;
+  height: 15px;
 }
 .new-session-send:disabled {
-  opacity: 0.45;
+  background: var(--color-border-primary);
+  color: var(--color-text-tertiary);
   cursor: not-allowed;
+  opacity: 0.6;
 }
 .new-session-send:not(:disabled):hover {
-  opacity: 0.9;
+  background: color-mix(in srgb, var(--color-accent-primary) 85%, #fff);
 }
 
 .new-session-advanced {
@@ -2255,7 +2369,15 @@ body {
 .session-banner:empty,
 .session-composer:empty { display: none; }
 .session-banner { flex-shrink: 0; }
-.session-composer { flex-shrink: 0; }
+.session-composer {
+  flex-shrink: 0;
+  margin-bottom: -9px;
+  display: flex;
+  padding-inline: 12px;
+}
+.session-composer > * {
+  justify-content: flex-start !important;
+}
 
 /* ── File tree (used inside the Files tab) ──────────────────────────────── */
 .wt-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@@ -4038,6 +4160,12 @@ body {
   box-shadow: var(--shadow-card);
   margin-bottom: -1px;
 }
+#ns-image-preview-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.25rem 0 0.5rem;
+}
 /* Square off the top corners of the input-bar when the preview strip sits above it */
 #input-area:has(#image-preview-strip:not([style*="display:none"])):not(:has(#image-preview-strip[style*="display: none"])) #input-bar {
   border-top-left-radius: 0;
@@ -4136,7 +4264,8 @@ body {
 .pdf-preview-remove:hover { background: var(--color-error); }
 
 /* ── Skill autocomplete dropdown ─────────────────────────────────────────── */
-#skill-autocomplete {
+#skill-autocomplete,
+.skill-autocomplete {
   position: absolute;
   bottom: 100%;
   left: 0;
@@ -4154,7 +4283,8 @@ body {
   z-index: 1000;
 }
 
-#skill-autocomplete-list {
+#skill-autocomplete-list,
+#ns-skill-autocomplete-list {
   padding: 0.25rem 0;
 }
 
@@ -6968,13 +7098,22 @@ body {
   border-color: var(--color-accent, #6366f1);
 }
 .extensions-sort {
+  flex-shrink: 0;
   font-size: 0.8125rem;
-  padding: 0.4375rem 0.5rem;
+  padding: 0.4375rem 2rem 0.4375rem 0.75rem;
   border-radius: 6px;
   border: 1px solid var(--color-border-primary);
   background: var(--color-bg-secondary);
   color: var(--color-text-primary);
   cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+}
+.extensions-sort:focus {
+  outline: none;
+  border-color: var(--color-accent, #6366f1);
 }
 #extensions-list {
   display: flex;
@@ -7065,14 +7204,23 @@ body {
 }
 .extension-detail-head { margin-bottom: 1rem; }
 .extension-detail-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
   background: transparent;
   border: none;
   color: var(--color-text-secondary);
   font-size: 0.8125rem;
   cursor: pointer;
-  padding: 0.25rem 0;
+  padding: 0.3rem 0.6rem;
+  border-radius: 6px;
+  margin-left: -0.6rem;
+  transition: background 0.15s, color 0.15s;
+}
+.extension-detail-back:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-hover);
 }
-.extension-detail-back:hover { color: var(--color-text-primary); }
 .extension-detail-hero {
   display: flex;
   align-items: flex-start;
@@ -12472,5 +12620,41 @@ body.setup-mode[data-theme="dark"] {
   #workspace-overlay.active {
     display: block;
   }
+
+  /* ── New-session page: mobile ── */
+  #welcome.new-session-page {
+    position: fixed;
+    top: 3rem;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    padding: 0;
+    justify-content: flex-start;
+    height: auto;
+  }
+  .new-session-inner {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .new-session-spacer {
+    display: none;
+  }
+  .new-session-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 1.25rem 1rem 1rem;
+    max-width: 100%;
+  }
+  .new-session-composer {
+    flex: none;
+    position: static;
+    padding: 0.75rem 1rem 1rem;
+    border-top: 1px solid var(--color-border-subtle);
+    background: var(--color-bg-primary);
+  }
 }
 

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

@@ -8,10 +8,16 @@
 //   Clacky.ext.subscribe(event, handler)     — listen to store events (read-only)
 //   Clacky.ext.ui.mount(slot, spec, opts)    — inject UI into a named slot
 //
-//   `spec` is either a render function or { create?, render }. On per-session
-//   slots (session.aside/banner/composer), providing `create(ctx)` gives you
-//   one runtime per sessionId, isolated across sessions and disposed only
-//   when the session leaves the sidebar.
+//   `spec` is either a render function or { create?, render }. The render
+//   signature is always `render(container, ctx, runtime)`:
+//     - `container` is a host-owned DOM element — append your UI into it,
+//       or return a DOM node / HTML string and the host appends it for you.
+//     - returning a function registers it as a teardown callback.
+//     - returning null is treated as an error (almost always a wrong
+//       signature, e.g. `(ctx) => ...`), surfaced as a crashed placeholder.
+//   On per-session slots (session.aside/banner/composer), providing
+//   `create(ctx)` gives you one runtime per sessionId, isolated across
+//   sessions and disposed only when the session leaves the sidebar.
 //
 // Safety guarantees enforced here (the "constitution"):
 //   - Every extension callback is wrapped in try/catch. A throwing extension is
@@ -49,8 +55,6 @@ Clacky.ext = (() => {
   // renderer becomes one tab (chrome drawn by the host), and only the active
   // tab's body is shown. Renderers in these slots must carry opts.tab.
   const TABBED_SLOTS = { "session.aside": true };
-  // slot => active tab id (remembered across re-renders within a page load).
-  const _activeTab = {};
 
   // Slots that follow the current session's agent scope. A mount into any
   // of these, made from inside a panel file, is confined to that panel's
@@ -92,6 +96,7 @@ Clacky.ext = (() => {
   // Resolved by the host before the extension scripts run (see loader markers).
   const _extAgents = {};
   const _panelAgents = {};
+  const _agentContributions = {};     // agent id => { panels:[{id,title,title_zh}], skills:[...] }
   let   _currentPanel = null;         // set while an official panel file is loading
 
   // Current session context, kept in sync by the host on every session switch.
@@ -213,6 +218,11 @@ Clacky.ext = (() => {
     Object.assign(_panelAgents, map);
   }
 
+  function registerAgentContributions(map) {
+    if (PURE || !map) return;
+    Object.assign(_agentContributions, map);
+  }
+
   const api = {
     // Register a named data source. Host/extensions can later resolve it.
     register(name, fn) {
@@ -376,26 +386,119 @@ Clacky.ext = (() => {
   // as the view teardown, run before the next render or on session exit.
   function _invokeRender(slot, entry, container, ctx) {
     const runtime = _getRuntime(slot, entry, ctx);
-    let node, teardown, crashed = false;
+    let node, teardown, crashed = false, reason = null;
     try {
       const out = entry.render(container, ctx, runtime);
-      if (out === undefined) {
-        crashed = false;  // container mutated in-place is fine
+      if (out === undefined || out === null) {
+        // undefined → container mutated in-place; null → renderer opted out of
+        // this context (e.g. `if (!ctx.sessionId) return null` on the new-session
+        // page). Both render nothing; neither is an error.
       } else if (typeof out === "function") {
         teardown = out;
       } else {
         node = out;
       }
-    } catch (_e) {
+    } catch (err) {
+      reason = String((err && err.stack) || err);
+      console.error(`[Clacky.ext] extension "${entry.extId || "?"}" threw in render for slot ${JSON.stringify(slot)}:`, err);
       crashed = true;
     }
-    if (crashed) return { crashed: true };
+    if (crashed) return { crashed: true, reason, extId: entry.extId };
     if (ctx && ctx.sessionId && teardown) {
       _rememberViewTeardown(ctx.sessionId, _mountKey(slot, entry), teardown);
     }
     return { node };
   }
 
+  // Build a styled, self-contained crashed-panel placeholder: a short headline
+  // plus a collapsible <details> exposing the actual reason and a nudge to the
+  // console. Never throws; the reason is rendered as plain text.
+  function _crashedPlaceholder(extId, reason) {
+    _injectCrashStyle();
+    const box = document.createElement("div");
+    box.className = "ext-slot-crashed";
+    box.setAttribute("data-ext-status", "crashed");
+
+    const head = document.createElement("div");
+    head.className = "ext-crashed-head";
+    const icon = document.createElement("span");
+    icon.className = "ext-crashed-icon";
+    icon.textContent = "!";
+    const title = document.createElement("span");
+    title.className = "ext-crashed-title";
+    title.textContent = extId ? `扩展「${extId}」渲染失败` : "扩展渲染失败";
+    head.appendChild(icon);
+    head.appendChild(title);
+    box.appendChild(head);
+
+    const hint = document.createElement("div");
+    hint.className = "ext-crashed-hint";
+    hint.textContent = "面板未能加载。展开下方详情，或打开浏览器控制台 (console) 查看完整错误。";
+    box.appendChild(hint);
+
+    if (reason) {
+      const details = document.createElement("details");
+      details.className = "ext-crashed-details";
+      const summary = document.createElement("summary");
+      summary.textContent = "错误详情";
+      const pre = document.createElement("pre");
+      pre.className = "ext-crashed-reason";
+      pre.textContent = reason;
+      details.appendChild(summary);
+      details.appendChild(pre);
+      box.appendChild(details);
+    }
+    return box;
+  }
+
+  let _crashStyleInjected = false;
+  function _injectCrashStyle() {
+    if (_crashStyleInjected) return;
+    _crashStyleInjected = true;
+    const style = document.createElement("style");
+    style.id = "ext-crashed-style";
+    style.textContent = `
+      .ext-slot-crashed {
+        margin: 12px;
+        padding: 14px 16px;
+        border: 1px solid var(--color-error-border, #fecaca);
+        background: var(--color-error-bg, #fef2f2);
+        border-radius: var(--radius-md, 8px);
+        color: var(--color-text-secondary, #56585e);
+        font-size: 13px;
+        line-height: 1.5;
+      }
+      .ext-crashed-head { display: flex; align-items: center; gap: 8px; }
+      .ext-crashed-icon {
+        display: inline-flex; align-items: center; justify-content: center;
+        width: 18px; height: 18px; flex: none;
+        border-radius: 50%;
+        background: var(--color-error, #ef4444);
+        color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
+      }
+      .ext-crashed-title { font-weight: 600; color: var(--color-text-primary, #1a1b1e); }
+      .ext-crashed-hint { margin-top: 6px; color: var(--color-text-tertiary, #8a8d94); }
+      .ext-crashed-details { margin-top: 10px; }
+      .ext-crashed-details > summary {
+        cursor: pointer; user-select: none;
+        color: var(--color-error, #ef4444); font-weight: 500;
+      }
+      .ext-crashed-reason {
+        margin: 8px 0 0;
+        padding: 10px;
+        max-height: 220px; overflow: auto;
+        background: var(--color-bg-primary, #fbfbfa);
+        border: 1px solid var(--color-border-primary, #e8e8e4);
+        border-radius: var(--radius-sm, 6px);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 12px; line-height: 1.45;
+        white-space: pre-wrap; word-break: break-word;
+        color: var(--color-text-secondary, #56585e);
+      }
+    `;
+    (document.head || document.documentElement).appendChild(style);
+  }
+
 
   // null agents AND null panel => global (always visible). Otherwise the
   // current profile must be in the renderer's agent list, or in the set of
@@ -407,6 +510,13 @@ Clacky.ext = (() => {
     return false;
   }
 
+  // What a third-party agent's extension contributes (panels + skills), from
+  // ext.yml — so the new-session page can advertise it before a session exists.
+  // Returns { panels:[{id,title,title_zh}], skills:[...] } or null for built-ins.
+  function contributionsForAgent(agentId) {
+    return (agentId && _agentContributions[agentId]) || null;
+  }
+
   // Render every extension registered for `slot` into `container`, scoped to the
   // current agent profile. Called by the host's view layer wherever it exposes a
   // slot, and re-called on session switch (the container is cleared first so a
@@ -436,11 +546,9 @@ Clacky.ext = (() => {
       // Nav mounts that open a workspace declare it via opts.workspace; the
       // host stamps it so the Router alone owns the active highlight.
       if (entry.workspace) wrap.setAttribute("data-ext-workspace", entry.workspace);
-      const { node, crashed } = _invokeRender(slot, entry, wrap, renderCtx);
+      const { node, crashed, reason, extId } = _invokeRender(slot, entry, wrap, renderCtx);
       if (crashed) {
-        wrap.setAttribute("data-ext-status", "crashed");
-        wrap.className = "ext-slot-crashed";
-        wrap.textContent = "Extension failed to render.";
+        wrap.appendChild(_crashedPlaceholder(extId || entry.extId, reason));
         container.appendChild(wrap);
         return;
       }
@@ -478,17 +586,16 @@ Clacky.ext = (() => {
     const bodies = document.createElement("div");
     bodies.className = "aside-bodies";
 
-    // Restore previously active tab if still present, else first tab.
+    // Always default to the first (highest-priority) tab. Tabs may register in
+    // several async passes; whichever pass runs last simply lands on tab #1.
     const ids = renderers.map((e) => e.tab.id);
-    let active = _activeTab[slot];
-    if (!active || !ids.includes(active)) active = ids[0];
+    const active = ids[0];
 
     const tabBtns = {};
     const bodyEls = {};
     const rendered = {};
 
     function activate(id) {
-      _activeTab[slot] = id;
       Object.keys(tabBtns).forEach((k) => tabBtns[k].classList.toggle("active", k === id));
       Object.keys(bodyEls).forEach((k) => bodyEls[k].classList.toggle("active", k === id));
       if (!rendered[id]) {
@@ -498,12 +605,9 @@ Clacky.ext = (() => {
         const localCtx = Object.assign({}, renderCtx, {
           setBadge: (n) => _setTabBadge(tabBtns[id], n),
         });
-        const { node, crashed } = _invokeRender(slot, entry, body, localCtx);
+        const { node, crashed, reason, extId } = _invokeRender(slot, entry, body, localCtx);
         if (crashed) {
-          const ph = document.createElement("div");
-          ph.className = "ext-slot-crashed";
-          ph.textContent = "Extension failed to render.";
-          body.appendChild(ph);
+          body.appendChild(_crashedPlaceholder(extId || entry.extId, reason));
         } else if (node != null) {
           if (typeof node === "string") body.innerHTML = node;
           else body.appendChild(node);
@@ -608,6 +712,8 @@ Clacky.ext = (() => {
     notifySessionRemoved,
     refreshSlots,
     registerPanelAgents,
+    registerAgentContributions,
+    contributionsForAgent,
     api,
     ui,
     subscribe,

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

@@ -21,8 +21,8 @@ const ExtensionsView = (() => {
     container.innerHTML = Array.from({ length: 4 }).map(() => `
       <div class="extension-card">
         <div class="extension-card-main">
-          <span class="skel" style="height:2rem;width:2rem;border-radius:8px;"></span>
-          <div class="extension-info">
+          <span class="skel" style="height:2rem;width:2rem;border-radius:8px;flex-shrink:0"></span>
+          <div class="extension-info" style="display:flex;flex-direction:column;gap:0.375rem">
             <span class="skel skel-title"></span>
             <span class="skel skel-subtitle"></span>
           </div>
@@ -161,7 +161,8 @@ const ExtensionsView = (() => {
     return `
       <div class="extension-detail-head">
         <button type="button" class="extension-detail-back" id="extension-detail-back">
-          ← ${escapeHtml(I18n.t("extensions.detail.back"))}
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 2L4 7L9 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          ${escapeHtml(I18n.t("extensions.detail.back"))}
         </button>
       </div>
       ${inner}`;