claude-code-hub 1.11.0 → 1.12.0

package/public/app.js

@@ -13,6 +13,9 @@ const guardedApps = new Set();
 // App id → the topics its hub:hello subscribes to. An app is live from its hello until the next
 // iframe load: e.source is the same WindowProxy across reloads, so a new document starts unknown.
 const liveApps = new Map();
+// Window → {appId, topics}: an app's page framed inside another app's page, such as a cck pane
+// (protocol §5.1). A pane does not reload when its parent does, so a closed window is dropped on send.
+const nestedApps = new Map();
 // Apps whose next document the hub loads from an action URL.
 const linkLoads = new Set();
 const HUB_PROTOCOLS = [1];
@@ -48,7 +51,7 @@ const palette = {
   rows: [],
   sel: 0,
   query: '',
-  confirmRestart: null,
+  confirmOp: null,
   message: null,
 };
 
@@ -80,10 +83,14 @@ function themePayload() {
   return { theme: themeState.theme ?? osTheme(), colorTheme: activeColorTheme() };
 }
 
-function sendTheme(appId) {
+function themeEvent() {
   const payload = themePayload();
   const vars = themeVars[payload.colorTheme ?? 'ember']?.[payload.theme];
-  sendTopic(appId, 'theme.changed', vars ? { ...payload, vars } : payload);
+  return vars ? { ...payload, vars } : payload;
+}
+
+function sendTheme(appId) {
+  sendTopic(appId, 'theme.changed', themeEvent());
 }
 
 // {<themeId>: {dark, light}}, each a map of the apps' core CSS variables, from /api/config, which
@@ -160,6 +167,36 @@ function appIdOf(source) {
   return Object.keys(iframes).find((id) => iframes[id].contentWindow === source);
 }
 
+function appIdByOrigin(origin) {
+  return Object.keys(apps).find((id) => originOf(id) === origin);
+}
+
+// A frame below a tab's frame. A cross-origin WindowProxy still exposes parent, and a popup or
+// another top window never reaches a tab.
+function underTab(source) {
+  for (let w = source?.parent; w && w !== window; w = w.parent) {
+    if (appIdOf(w)) return true;
+    if (w === w.parent) return false;
+  }
+  return false;
+}
+
+function postNested(win, message) {
+  const nested = nestedApps.get(win);
+  if (!nested) return;
+  if (win.closed) {
+    nestedApps.delete(win);
+    return;
+  }
+  win.postMessage(message, originOf(nested.appId));
+}
+
+function sendNestedTheme(win, payload = themeEvent()) {
+  if (nestedApps.get(win)?.topics.has('theme.changed')) {
+    postNested(win, { type: 'hub:event', topic: 'theme.changed', payload });
+  }
+}
+
 // The last value lives in themeState and projectState, so a replay after welcome is a send.
 function sendTopic(appId, topic, payload) {
   if (liveApps.get(appId)?.has(topic)) postTo(appId, { type: 'hub:event', topic, payload });
@@ -243,7 +280,8 @@ async function init() {
   applyHubTheme();
   buildIframes();
   const saved = storedTab();
-  switchTab(apps[saved] ? saved : Object.keys(apps)[0]);
+  const tabs = tabIds();
+  switchTab(tabs.includes(saved) ? saved : (tabs[0] ?? Object.keys(apps)[0]));
   listenMessages();
   listenKeys();
   bindPalette();
@@ -306,16 +344,17 @@ function hideToast(toast) {
 }
 
 // Null on success. A 409 with live terminals asks for force: true on the next call.
-async function requestRestart(id, force) {
+// op is restart or stop.
+async function requestAppOp(id, op, force) {
   try {
-    await sendJson('POST', `/api/apps/${encodeURIComponent(id)}/restart`, { force });
+    await sendJson('POST', `/api/apps/${encodeURIComponent(id)}/${op}`, { force });
     return null;
   } catch (err) {
     const name = apps[id]?.name ?? id;
     const n = err.status === 409 && err.data?.terminals;
-    if (!n) return { message: `${name} did not restart: ${err.message}` };
+    if (!n) return { message: `${name} did not ${op}: ${err.message}` };
     const them = n === 1 ? 'it' : 'them';
-    return { terminals: n, message: `${name} has ${n} live terminal${n === 1 ? '' : 's'}. A restart ends ${them}.` };
+    return { terminals: n, message: `${name} has ${n} live terminal${n === 1 ? '' : 's'}. A ${op} ends ${them}.` };
   }
 }
 
@@ -361,6 +400,7 @@ function reloadIframes() {
   projectState = null;
   published.clear();
   missed.clear();
+  nestedApps.clear();
   // A new element, because assigning src is only a fragment navigation when the app's URL
   // differs from the new one by the #t= fragment alone, and the old dir's document stays.
   for (const id of Object.keys(iframes)) replaceIframe(id);
@@ -432,12 +472,19 @@ function makeIframe(id) {
   return iframe;
 }
 
+// A hidden app (`hidden` in config.json) has no tab keys, so its frame loads only when the
+// launcher or an action opens it.
+function tabIds() {
+  return Object.keys(apps).filter((id) => !apps[id].hidden);
+}
+
+function addIframe(id) {
+  iframes[id] = makeIframe(id);
+  document.getElementById('iframe-container').appendChild(iframes[id]);
+}
+
 function buildIframes() {
-  const container = document.getElementById('iframe-container');
-  for (const id of Object.keys(apps)) {
-    iframes[id] = makeIframe(id);
-    container.appendChild(iframes[id]);
-  }
+  for (const id of tabIds()) addIframe(id);
 }
 
 const TAB_KEY = 'hub-tab';
@@ -452,6 +499,7 @@ function storedTab() {
 
 function switchTab(appId) {
   if (!apps[appId]) return;
+  if (!iframes[appId]) addIframe(appId);
   if (appId !== activeApp) previousApp = activeApp;
   activeApp = appId;
   try {
@@ -476,18 +524,26 @@ function onIframeLoad(appId) {
   if (appId === activeApp) hideLoading();
 }
 
-function onHello(appId, data) {
+function welcomeFor(data) {
   const common = Array.isArray(data.protocol) ? HUB_PROTOCOLS.filter((v) => data.protocol.includes(v)) : [];
-  if (!common.length) return;
-  liveApps.set(appId, new Set(Array.isArray(data.subscribes) ? data.subscribes : []));
-  postTo(appId, {
+  if (!common.length) return null;
+  return {
     type: 'hub:welcome',
     protocol: Math.max(...common),
     forward: Object.keys(bindings()),
     keys: actionKeys(),
     themes: hubThemes,
     actions: Object.keys(actions),
-  });
+  };
+}
+
+const helloTopics = (data) => new Set(Array.isArray(data.subscribes) ? data.subscribes : []);
+
+function onHello(appId, data) {
+  const welcome = welcomeFor(data);
+  if (!welcome) return;
+  liveApps.set(appId, helloTopics(data));
+  postTo(appId, welcome);
   sendTheme(appId);
   // A document the hub loaded from an action URL got its project from that URL. The hub's own
   // project would undo the link, so it goes out only with the next change.
@@ -522,9 +578,9 @@ function fillUrl(template, params) {
 }
 
 // Protocol §7. The result does not wait for the handler: the hub queues nothing.
-function onInvoke(appId, { id, action, params = {} }) {
+function onInvoke({ id, action, params = {} }, send) {
   if (typeof id !== 'string') return;
-  const reply = (result) => postTo(appId, { type: 'hub:result', id, ...result });
+  const reply = (result) => send({ type: 'hub:result', id, ...result });
   const spec = typeof action === 'string' && Object.hasOwn(actions, action) ? actions[action] : null;
   if (!spec) return reply({ ok: false, reason: 'unhandled' });
   if (badParams(spec.params, params)) return reply({ ok: false, reason: 'bad-params' });
@@ -546,12 +602,13 @@ function listenMessages() {
   });
   window.addEventListener('message', (e) => {
     const appId = appIdOf(e.source);
-    if (!appId || e.origin !== originOf(appId)) return;
+    if (!appId) return onNestedMessage(e);
+    if (e.origin !== originOf(appId)) return;
     const data = e.data ?? {};
     if (data.type === 'hub:hello') {
       onHello(appId, data);
     } else if (data.type === 'hub:invoke') {
-      onInvoke(appId, data);
+      onInvoke(data, (m) => postTo(appId, m));
     } else if (data.type === 'hub:publish') {
       onPublish(appId, data);
     } else if (data.type === 'hub:keydown') {
@@ -570,35 +627,71 @@ function listenMessages() {
         })
         .catch(() => {});
     } else if (data.type === 'hub:openExternal') {
-      // In the installed PWA window a framed sub-app's own target=_blank opens
-      // nothing, so the SDK hands external links up to the top frame instead.
-      let url;
-      try {
-        url = new URL(String(data.url));
-      } catch (_) {
-        return;
-      }
-      if (url.protocol !== 'http:' && url.protocol !== 'https:') return;
-      window.open(url.href, '_blank', 'noopener');
+      openExternal(data);
     } else if (data.type === 'hub:theme') {
-      // colorTheme is optional and sticky.
-      if (data.theme !== 'light' && data.theme !== 'dark') return;
-      const hasColor = typeof data.colorTheme === 'string' && /^[a-z0-9-]{0,32}$/.test(data.colorTheme);
-      const changed = data.theme !== themeState.theme || (hasColor && data.colorTheme !== activeColorTheme());
-      if (!changed) return;
-      themeState.theme = data.theme;
-      if (hasColor) {
-        themeState.colorTheme = data.colorTheme;
-        if (activeConfigDir) themeState.colorThemes[activeConfigDir] = data.colorTheme;
-      }
-      localStorage.setItem('hub-theme', JSON.stringify(themeState));
-      applyHubTheme();
-      // The sender gets the echo too, for the vars.
-      for (const id of Object.keys(iframes)) sendTheme(id);
+      onThemeMessage(data);
     }
   });
 }
 
+// Protocol §5.1. A nested page gets the welcome and theme.changed, and may send hello, invoke,
+// keydown, openExternal and theme. hub:active, the other topics, publish, closeGuard and the
+// terminal token belong to the app's tab, which keeps them per app id.
+function onNestedMessage(e) {
+  const data = e.data ?? {};
+  const known = nestedApps.get(e.source);
+  const appId = data.type === 'hub:hello' && underTab(e.source) ? appIdByOrigin(e.origin) : known?.appId;
+  if (!appId || e.origin !== originOf(appId)) return;
+  if (data.type === 'hub:hello') {
+    const welcome = welcomeFor(data);
+    if (!welcome) return;
+    const topics = helloTopics(data);
+    nestedApps.set(e.source, { appId, topics });
+    postNested(e.source, welcome);
+    sendNestedTheme(e.source);
+  } else if (data.type === 'hub:invoke') {
+    onInvoke(data, (m) => postNested(e.source, m));
+  } else if (data.type === 'hub:keydown') {
+    handleForwardedKey(data);
+  } else if (data.type === 'hub:openExternal') {
+    openExternal(data);
+  } else if (data.type === 'hub:theme') {
+    onThemeMessage(data);
+  }
+}
+
+// In the installed PWA window a framed sub-app's own target=_blank opens
+// nothing, so the SDK hands external links up to the top frame instead.
+function openExternal(data) {
+  let url;
+  try {
+    url = new URL(String(data.url));
+  } catch (_) {
+    return;
+  }
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') return;
+  window.open(url.href, '_blank', 'noopener');
+}
+
+function onThemeMessage(data) {
+  // colorTheme is optional and sticky.
+  if (data.theme !== 'light' && data.theme !== 'dark') return;
+  const hasColor = typeof data.colorTheme === 'string' && /^[a-z0-9-]{0,32}$/.test(data.colorTheme);
+  const changed = data.theme !== themeState.theme || (hasColor && data.colorTheme !== activeColorTheme());
+  if (!changed) return;
+  themeState.theme = data.theme;
+  if (hasColor) {
+    themeState.colorTheme = data.colorTheme;
+    if (activeConfigDir) themeState.colorThemes[activeConfigDir] = data.colorTheme;
+  }
+  localStorage.setItem('hub-theme', JSON.stringify(themeState));
+  applyHubTheme();
+  // The sender gets the echo too, for the vars.
+  for (const id of Object.keys(iframes)) sendTheme(id);
+  const payload = themeEvent();
+  for (const win of nestedApps.keys()) sendNestedTheme(win, payload);
+}
+
 function handleForwardedKey(d) {
   const e = {
     key: d.key,
@@ -624,7 +717,7 @@ function hubActions() {
     {
       id: 'hub.appByNumber',
       combo: `${IS_MAC ? 'ctrl+alt' : 'alt'}+{n}`,
-      run: (i) => switchTab(Object.keys(apps)[i]),
+      run: (i) => switchTab(tabIds()[i]),
       count: 9,
     },
   ];
@@ -636,7 +729,7 @@ function hubActions() {
 // that has it by default.
 function bindings() {
   if (keymap) return keymap;
-  const tabs = Object.keys(apps).length;
+  const tabs = tabIds().length;
   const own = (b) => Object.hasOwn(userKeys, b.id);
   const expand = (action) => {
     const combo = comboFor(action);
@@ -678,10 +771,9 @@ function comboLabel(combo) {
 }
 
 function cycleTab(delta) {
-  const ids = Object.keys(apps);
+  const ids = tabIds();
   const idx = ids.indexOf(activeApp);
-  const next = ids[(idx + delta + ids.length) % ids.length];
-  switchTab(next);
+  switchTab(idx < 0 ? ids.at(delta > 0 ? 0 : -1) : ids[(idx + delta + ids.length) % ids.length]);
 }
 
 function listenKeys() {
@@ -881,6 +973,26 @@ const APP_ICONS = {
     ['circle', { cx: 12, cy: 12, r: 3 }],
     ['path', { d: 'm16 16-1.9-1.9' }],
   ],
+  network: [
+    ['rect', { x: 16, y: 16, width: 6, height: 6, rx: 1 }],
+    ['rect', { x: 2, y: 16, width: 6, height: 6, rx: 1 }],
+    ['rect', { x: 9, y: 2, width: 6, height: 6, rx: 1 }],
+    ['path', { d: 'M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3' }],
+    ['path', { d: 'M12 12V8' }],
+  ],
+};
+
+const ROW_ICONS = {
+  copy: [
+    ['rect', { width: 14, height: 14, x: 8, y: 8, rx: 2 }],
+    ['path', { d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' }],
+  ],
+  restart: [
+    ['path', { d: 'M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8' }],
+    ['path', { d: 'M21 3v5h-5' }],
+  ],
+  start: [['polygon', { points: '6 3 20 12 6 21 6 3' }]],
+  stop: [['rect', { width: 18, height: 18, x: 3, y: 3, rx: 2 }]],
 };
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
@@ -891,9 +1003,7 @@ function svgNode(tag, attrs) {
   return node;
 }
 
-function appIcon(app) {
-  const shapes = APP_ICONS[app.icon];
-  if (!shapes) return el('span', 'palette-icon letter', (app.name || '?').slice(0, 1).toUpperCase());
+function lucideSvg(shapes) {
   const svg = svgNode('svg', {
     viewBox: '0 0 24 24',
     fill: 'none',
@@ -904,13 +1014,20 @@ function appIcon(app) {
     'aria-hidden': 'true',
   });
   svg.append(...shapes.map(([tag, attrs]) => svgNode(tag, attrs)));
+  return svg;
+}
+
+function appIcon(app) {
+  const shapes = APP_ICONS[app.icon];
+  if (!shapes) return el('span', 'palette-icon letter', (app.name || '?').slice(0, 1).toUpperCase());
   const box = el('span', 'palette-icon');
-  box.append(svg);
+  box.append(lucideSvg(shapes));
   return box;
 }
 
 function appRows(q) {
-  const list = Object.entries(apps).map(([id, a], i) => ({ kind: 'app', id, app: a, index: i }));
+  const tabs = tabIds();
+  const list = Object.entries(apps).map(([id, a]) => ({ kind: 'app', id, app: a, index: tabs.indexOf(id) }));
   if (!q) return list;
   const hit = list.filter((r) => r.app.name.toLowerCase().includes(q) || r.id.includes(q));
   return hit.length ? hit : list.filter((r) => subseq(r.app.name.toLowerCase(), q));
@@ -918,7 +1035,8 @@ function appRows(q) {
 
 // A click on the button runs the mode's rowKeys entry for `key`, the same as Ctrl+<key>.
 function rowButton(className, glyph, key, title, label) {
-  const btn = el('button', className, glyph);
+  const btn = el('button', `palette-btn ${className}`);
+  btn.append(ROW_ICONS[glyph] ? lucideSvg(ROW_ICONS[glyph]) : glyph);
   btn.type = 'button';
   btn.title = title;
   btn.setAttribute('aria-label', label);
@@ -974,23 +1092,41 @@ async function copyToHint(text) {
   }
 }
 
-// The terminal provider answers 409 with a terminal count; the second Ctrl+R on the same app sends force.
-async function restartFromPalette(id) {
-  const force = palette.confirmRestart === id;
-  palette.confirmRestart = null;
-  setPaletteHint(`Restarting ${apps[id]?.name ?? id}…`);
-  const failed = await withPaletteBusy(() => requestRestart(id, force));
+function toggleFromPalette(id) {
+  return appOpFromPalette(id, palette.appStats?.[id]?.stopped ? 'start' : 'stop');
+}
+
+const APP_OPS = {
+  restart: { key: 'R', verb: 'Restarting' },
+  start: { key: 'S', verb: 'Starting' },
+  stop: { key: 'S', verb: 'Stopping' },
+};
+
+// The terminal provider answers 409 with a terminal count; the same key again on the same app sends force.
+async function appOpFromPalette(id, op) {
+  const confirm = `${op}\n${id}`;
+  const force = palette.confirmOp === confirm;
+  palette.confirmOp = null;
+  const name = apps[id]?.name ?? id;
+  setPaletteHint(`${APP_OPS[op].verb} ${name}…`);
+  const failed = await withPaletteBusy(() => requestAppOp(id, op, force));
   if (failed?.terminals) {
-    palette.confirmRestart = id;
-    setPaletteHint(`${failed.message} Press Ctrl+R again to restart.`);
+    palette.confirmOp = confirm;
+    setPaletteHint(`${failed.message} Press Ctrl+${APP_OPS[op].key} again to ${op}.`);
     return;
   }
   if (failed) {
     setPaletteHint(failed.message);
     return;
   }
+  if (iframes[id]) replaceIframe(id);
+  if (op === 'stop') {
+    if (palette.appStats) palette.appStats[id] = { ...palette.appStats[id], stopped: true, rss: 0 };
+    setPaletteHint(`Stopped ${name}`);
+    renderPalette();
+    return;
+  }
   closePalette();
-  replaceIframe(id);
   switchTab(id);
 }
 
@@ -1060,10 +1196,10 @@ const PALETTE_MODES = {
     placeholder: 'Search apps...',
     label: 'Switch app',
     get hint() {
-      const keys = 'Enter switch · Ctrl+C copy the URL · Ctrl+R restart the app';
+      const keys = 'Enter switch · Ctrl+C copy URL · Ctrl+R restart · Ctrl+S start/stop';
       if (!hubInfo.version) return keys;
       const plugin = hubInfo.plugin ? [pluginNode(hubInfo.plugin), ' · '] : [];
-      return [`Claude Code Hub ${hubInfo.version} · `, ...plugin, keys];
+      return [`Hub ${hubInfo.version} · `, ...plugin, keys];
     },
     empty: 'No matching app',
     rows: (_typed, q) => appRows(q),
@@ -1077,23 +1213,36 @@ const PALETTE_MODES = {
       const s = palette.appStats?.[row.id];
       if (s?.version) li.append(el('span', 'ver', s.version));
       if (s?.plugin) li.append(pluginNode(s.plugin));
+      if (s?.linked) {
+        const badge = el('span', 'linked', 'linked');
+        badge.title = 'Runs from a local folder (ext install). Restart (Ctrl+R) loads its code changes.';
+        li.append(badge);
+      }
       if (s?.slowMs) {
         const badge = el('span', 'slow', 'slow port');
         badge.title = `Its port delays requests by up to ${(s.slowMs / 1000).toFixed(1)} s. Restart (Ctrl+R) moves it to a new port.`;
         li.append(badge);
       }
-      const stats = el('span', 'stats', s?.rss ? `${Math.round(s.rss / 1048576)} MB · ${s.cpu}%` : '');
+      const usage = s?.rss ? `${Math.round(s.rss / 1048576)} MB · ${s.cpu}%` : '';
+      const stats = el('span', 'stats', s?.stopped ? 'stopped' : usage);
       stats.title = 'Memory and CPU of the app process. Child processes are not counted. 100% is one core.';
       li.append(stats);
       const combo = appNumberCombo(row.index);
-      const key = row.id === activeApp ? 'active' : combo ? comboLabel(combo) : '';
+      const key = row.id === activeApp ? 'active' : combo ? comboLabel(combo) : row.app.hidden ? 'hidden' : '';
       li.append(el('span', 'age', key));
       li.append(
-        rowButton('palette-copy', '⧉', 'c', 'Copy the URL (Ctrl+C)', `Copy the URL of ${row.app.name}`),
-        rowButton('palette-restart', '↻', 'r', 'Restart the app (Ctrl+R)', `Restart ${row.app.name}`),
+        rowButton('palette-copy', 'copy', 'c', 'Copy the URL (Ctrl+C)', `Copy the URL of ${row.app.name}`),
+        rowButton('palette-restart', 'restart', 'r', 'Restart the app (Ctrl+R)', `Restart ${row.app.name}`),
+        s?.stopped
+          ? rowButton('palette-toggle', 'start', 's', 'Start the app (Ctrl+S)', `Start ${row.app.name}`)
+          : rowButton('palette-toggle', 'stop', 's', 'Stop the app (Ctrl+S)', `Stop ${row.app.name}`),
       );
     },
-    rowKeys: { c: (row) => copyToHint(apps[row.id].url), r: (row) => restartFromPalette(row.id) },
+    rowKeys: {
+      c: (row) => copyToHint(apps[row.id].url),
+      r: (row) => appOpFromPalette(row.id, 'restart'),
+      s: (row) => toggleFromPalette(row.id),
+    },
     commit(row) {
       closePalette();
       switchTab(row.id);
@@ -1151,7 +1300,7 @@ function openPalette(mode) {
   palette.mode = mode;
   palette.query = '';
   palette.sel = null;
-  palette.confirmRestart = null;
+  palette.confirmOp = null;
   palette.message = null;
   input.value = '';
   input.placeholder = spec.placeholder;
@@ -1294,12 +1443,18 @@ function bindPalette() {
     } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
       e.preventDefault();
       movePaletteSel(-1);
-    } else if (e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && ['c', 'd', 'r'].includes(e.key.toLowerCase())) {
+    } else if (
+      e.ctrlKey &&
+      !e.altKey &&
+      !e.shiftKey &&
+      !e.metaKey &&
+      ['c', 'd', 'r', 's'].includes(e.key.toLowerCase())
+    ) {
       const run = PALETTE_MODES[palette.mode].rowKeys?.[e.key.toLowerCase()];
       // Ctrl+C with text selected in the input keeps the browser's copy.
       if (e.key.toLowerCase() === 'c' && (!run || input.selectionStart !== input.selectionEnd)) return;
       // Ctrl+D would otherwise bookmark the page in Chrome and Firefox.
-      // Ctrl+R would otherwise reload the hub page.
+      // Ctrl+R would otherwise reload the hub page, and Ctrl+S save it.
       e.preventDefault();
       const row = palette.rows[palette.sel];
       if (run && row && row.kind !== 'literal') run(row);

package/public/index.html

@@ -290,6 +290,15 @@
       font-size: 11px;
     }
 
+    .palette-row .linked {
+      margin-left: 10px;
+      padding: 0 6px;
+      border-radius: 4px;
+      color: var(--text-dim);
+      border: 1px solid var(--text-dim);
+      font-size: 11px;
+    }
+
     .palette-row .ver,
     .palette-hint .ver {
       color: var(--text-dim);
@@ -334,9 +343,10 @@
 
     .palette-row.selected .palette-icon { color: var(--accent); }
 
-    .palette-row .palette-remove,
-    .palette-row .palette-copy,
-    .palette-row .palette-restart {
+    .palette-row .palette-btn {
+      display: inline-flex;
+      align-items: center;
+      align-self: center;
       margin-left: auto;
       padding: 0 6px;
       border: none;
@@ -349,20 +359,17 @@
       opacity: 0;
     }
 
-    .palette-row:hover .palette-remove,
-    .palette-row.selected .palette-remove,
-    .palette-row:hover .palette-copy,
-    .palette-row.selected .palette-copy,
-    .palette-row:hover .palette-restart,
-    .palette-row.selected .palette-restart { opacity: 1; }
+    .palette-row:hover .palette-btn,
+    .palette-row.selected .palette-btn { opacity: 1; }
+
+    .palette-row .palette-btn:hover { color: var(--accent); }
 
     .palette-row .palette-remove:hover { color: #e5484d; }
 
-    .palette-row .age + .palette-copy,
-    .palette-row .palette-copy + .palette-restart { margin-left: 0; }
+    .palette-row .age + .palette-btn,
+    .palette-row .palette-btn + .palette-btn { margin-left: 0; }
 
-    .palette-row .palette-copy:hover,
-    .palette-row .palette-restart:hover { color: var(--accent); }
+    .palette-row .palette-btn svg { width: 14px; height: 14px; }
 
     .palette-hint {
       padding: 8px 14px;