@simonsbs/keylore 1.0.0-rc5 → 1.0.0

package/dist/http/admin-ui.js

@@ -1,5 +1,6 @@
 import fs from "node:fs";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 const adminStyles = String.raw `
 :root {
   --canvas: #f4efe3;
@@ -22,6 +23,10 @@ const adminStyles = String.raw `
   box-sizing: border-box;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 html {
   scroll-behavior: smooth;
 }
@@ -148,6 +153,30 @@ textarea {
   font-weight: 600;
 }
 
+.tab-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 18px;
+}
+
+.tab-button {
+  appearance: none;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 10px 14px;
+  background: #f7f2e8;
+  color: var(--ink);
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.tab-button.is-active {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: rgba(19, 93, 74, 0.24);
+}
+
 .button,
 .button-secondary,
 .button-danger {
@@ -264,29 +293,71 @@ textarea {
 
 .notice {
   display: none;
-  margin: 20px 0 0;
-  padding: 14px 16px;
-  border-radius: 16px;
-  border: 1px solid var(--line);
 }
 
 .notice.is-visible {
-  display: block;
+  display: none;
 }
 
-.notice.is-info {
-  background: rgba(19, 93, 74, 0.08);
-  color: var(--accent);
+.toast-console {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 80;
+  display: grid;
+  gap: 10px;
+  width: min(420px, calc(100vw - 32px));
 }
 
-.notice.is-error {
-  background: rgba(143, 45, 35, 0.09);
-  color: var(--danger);
+.toast {
+  border: 1px solid var(--line);
+  background: rgba(255, 250, 241, 0.96);
+  border-radius: 16px;
+  box-shadow: 0 20px 40px rgba(23, 33, 31, 0.18);
+  padding: 14px 16px;
 }
 
-.notice.is-warning {
-  background: rgba(157, 75, 20, 0.1);
-  color: var(--warning);
+.toast.is-info {
+  border-color: rgba(19, 93, 74, 0.16);
+}
+
+.toast.is-error {
+  border-color: rgba(143, 45, 35, 0.2);
+}
+
+.toast.is-warning {
+  border-color: rgba(157, 75, 20, 0.18);
+}
+
+.toast-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.toast-title {
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.toast-close {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0;
+}
+
+.toast-copy {
+  margin: 0;
+  color: var(--ink);
+  line-height: 1.5;
 }
 
 .dashboard {
@@ -439,6 +510,16 @@ textarea {
   grid-column: 1 / -1;
 }
 
+.field.has-error input,
+.field.has-error textarea,
+.field.has-error select,
+.field-wide.has-error input,
+.field-wide.has-error textarea,
+.field-wide.has-error select {
+  border-color: rgba(143, 45, 35, 0.45);
+  box-shadow: 0 0 0 3px rgba(143, 45, 35, 0.08);
+}
+
 .field label,
 .field-wide label {
   font-size: 0.84rem;
@@ -447,6 +528,58 @@ textarea {
   letter-spacing: 0.08em;
 }
 
+.field-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.info-glyph {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  border: 1px solid rgba(23, 33, 31, 0.18);
+  background: rgba(255, 255, 255, 0.8);
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: help;
+}
+
+.info-glyph::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 10px);
+  transform: translateX(-50%);
+  width: min(280px, 70vw);
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: rgba(23, 33, 31, 0.96);
+  color: #fff8ef;
+  font-size: 0.8rem;
+  font-weight: 500;
+  line-height: 1.45;
+  text-transform: none;
+  letter-spacing: normal;
+  box-shadow: 0 14px 30px rgba(23, 33, 31, 0.22);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+  z-index: 5;
+}
+
+.info-glyph:hover::after,
+.info-glyph:focus-visible::after {
+  opacity: 1;
+}
+
 .field input,
 .field textarea,
 .field select,
@@ -469,6 +602,27 @@ textarea {
   line-height: 1.5;
 }
 
+.field-error {
+  display: none;
+  margin-top: 6px;
+  color: var(--danger);
+  font-size: 0.86rem;
+  line-height: 1.4;
+}
+
+.field-error.is-visible {
+  display: block;
+}
+
+pre {
+  max-width: 100%;
+  margin: 0;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
 .form-actions,
 .panel-actions,
 .toolbar {
@@ -493,6 +647,90 @@ textarea {
   align-items: center;
 }
 
+.utility-shell {
+  display: none;
+}
+
+.token-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.token-list {
+  display: grid;
+  gap: 12px;
+}
+
+.token-row {
+  padding: 16px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(23, 33, 31, 0.08);
+}
+
+.token-row h3 {
+  margin: 0 0 6px;
+  font-size: 1rem;
+}
+
+.token-row p {
+  margin: 0;
+}
+
+dialog.modal {
+  width: min(920px, calc(100vw - 32px));
+  max-height: calc(100vh - 32px);
+  padding: 0;
+  border: 0;
+  border-radius: 24px;
+  background: transparent;
+}
+
+dialog.modal::backdrop {
+  background: rgba(23, 33, 31, 0.38);
+  backdrop-filter: blur(6px);
+}
+
+.modal-card {
+  border: 1px solid var(--line);
+  background: rgba(255, 250, 241, 0.98);
+  border-radius: 24px;
+  box-shadow: var(--shadow);
+  overflow: auto;
+  max-height: calc(100vh - 32px);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+  padding: 22px 24px 0;
+}
+
+.modal-body {
+  padding: 18px 24px 24px;
+}
+
+.modal-feedback {
+  display: none;
+  margin-bottom: 16px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  border: 1px solid rgba(143, 45, 35, 0.16);
+  background: rgba(143, 45, 35, 0.08);
+  color: var(--danger);
+  line-height: 1.5;
+}
+
+.modal-feedback.is-visible {
+  display: block;
+}
+
 .pill {
   display: inline-flex;
   align-items: center;
@@ -550,6 +788,40 @@ textarea {
   gap: 12px;
 }
 
+.snippet-stack {
+  display: grid;
+  gap: 14px;
+}
+
+.snippet-box {
+  position: relative;
+}
+
+.snippet-box textarea {
+  padding-right: 54px;
+}
+
+.copy-glyph {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+  background: rgba(255, 250, 241, 0.92);
+  color: var(--ink);
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.copy-glyph:hover,
+.copy-glyph:focus-visible {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
 .list-card {
   padding: 16px;
   border-radius: 16px;
@@ -716,6 +988,15 @@ pre {
   }
 }
 `;
+function resolveLocalStdioEntryPath() {
+    const moduleDir = path.dirname(fileURLToPath(import.meta.url));
+    const packageRoot = path.resolve(moduleDir, "..", "..");
+    const builtEntry = path.join(packageRoot, "dist", "index.js");
+    if (fs.existsSync(builtEntry)) {
+        return builtEntry;
+    }
+    return path.join(packageRoot, "src", "index.ts");
+}
 const adminApp = String.raw `
 const config = window.__KEYLORE_ADMIN_CONFIG__;
 const state = {
@@ -739,8 +1020,11 @@ const state = {
   currentCredentialContext: null,
   lastMcpConnection: null,
   mcpToken: '',
+  connectTab: 'codex',
   advancedVisible: false,
-  credentialIdManuallyEdited: false
+  credentialIdManuallyEdited: false,
+  credentialModalMode: 'create',
+  toastCounter: 0
 };
 
 const storageKey = 'keylore-admin-session';
@@ -758,6 +1042,26 @@ function byId(id) {
   return document.getElementById(id);
 }
 
+function showDialog(id) {
+  const dialog = byId(id);
+  if (!(dialog instanceof HTMLDialogElement)) {
+    return;
+  }
+  if (!dialog.open) {
+    dialog.showModal();
+  }
+}
+
+function closeDialog(id) {
+  const dialog = byId(id);
+  if (!(dialog instanceof HTMLDialogElement)) {
+    return;
+  }
+  if (dialog.open) {
+    dialog.close();
+  }
+}
+
 function splitList(value) {
   return String(value ?? '')
     .split(/[\n,]/)
@@ -811,17 +1115,17 @@ function slugifyTokenKey(value) {
   return normalized || 'token';
 }
 
-function firstPromptForClient(clientName) {
+function firstPrompt() {
   const credential = state.currentCredentialContext || selectedCredentialSummary() || visibleCredentials()[0];
   if (!credential) {
-    return 'After you create a credential, ask ' + clientName + ': "Search KeyLore for the best credential for the target service, explain why you chose it, and use it through the broker without exposing the raw token."';
+    return 'Search KeyLore for the best credential for the target service, explain why you chose it, and use it through the broker without exposing the raw token.';
   }
 
   const domain = credential.allowedDomains && credential.allowedDomains.length > 0
     ? credential.allowedDomains[0]
     : 'target-service.example.com';
   const targetUrl = defaultTestUrlForCredential(credential) || ('https://' + domain);
-  return 'Ask ' + clientName + ': "Search KeyLore for the best credential for ' + credential.service + ' on ' + domain + '. Explain why you chose it, then use it through KeyLore to fetch ' + targetUrl + ' without exposing the raw token."';
+  return 'Search KeyLore for the best credential for ' + credential.service + ' on ' + domain + '. Explain why you chose it, then use it through KeyLore to fetch ' + targetUrl + ' without exposing the raw token.';
 }
 
 function mcpHttpTokenValue() {
@@ -868,6 +1172,21 @@ function geminiHttpSnippet() {
   });
 }
 
+function claudeStdioSnippet() {
+  return [
+    'claude mcp add keylore_stdio -- node ' + config.stdioEntryPath + ' --transport stdio',
+    'claude mcp list'
+  ].join('\n');
+}
+
+function claudeHttpSnippet() {
+  return [
+    'export KEYLORE_MCP_ACCESS_TOKEN=' + mcpHttpTokenValue(),
+    'claude mcp add --transport http --header "Authorization: Bearer $KEYLORE_MCP_ACCESS_TOKEN" keylore_http ' + config.baseUrl.replace(/\/$/, '') + '/mcp',
+    'claude mcp list'
+  ].join('\n');
+}
+
 function genericHttpSnippet() {
   return [
     'MCP endpoint: ' + config.baseUrl.replace(/\/$/, '') + '/mcp',
@@ -875,16 +1194,107 @@ function genericHttpSnippet() {
   ].join('\n');
 }
 
+function humanizeErrorMessage(message) {
+  if (message.includes('Missing secret material in local secret store for')) {
+    return 'This token record exists, but its stored secret is missing. Open Edit token, paste the token again, and save changes.';
+  }
+  return message;
+}
+
+function pushToast(kind, message) {
+  const node = byId('toast-console');
+  if (!node) {
+    return;
+  }
+  state.toastCounter += 1;
+  const toast = document.createElement('div');
+  toast.className = 'toast is-' + kind;
+  toast.dataset.toastId = String(state.toastCounter);
+  toast.innerHTML = [
+    '<div class="toast-head">',
+    '<span class="toast-title">' + escapeHtml(kind === 'error' ? 'Error' : kind === 'warning' ? 'Warning' : 'Info') + '</span>',
+    '<button class="toast-close" type="button" data-toast-close="' + escapeHtml(String(state.toastCounter)) + '" aria-label="Close notification">×</button>',
+    '</div>',
+    '<p class="toast-copy">' + escapeHtml(message) + '</p>'
+  ].join('');
+  node.prepend(toast);
+  while (node.childElementCount > 6) {
+    node.lastElementChild?.remove();
+  }
+  if (kind !== 'error') {
+    const dismissAfterMs = kind === 'warning' ? 7000 : 4000;
+    window.setTimeout(function() {
+      if (toast.isConnected) {
+        toast.remove();
+      }
+    }, dismissAfterMs);
+  }
+}
+
 function setNotice(kind, message) {
-  const node = byId('notice');
-  node.className = 'notice is-visible is-' + kind;
-  node.textContent = message;
+  pushToast(kind, humanizeErrorMessage(String(message ?? '')));
 }
 
 function clearNotice() {
-  const node = byId('notice');
-  node.className = 'notice';
-  node.textContent = '';
+  // Intentionally keep previous toasts visible until the user dismisses them.
+}
+
+function setCredentialModalFeedback(kind, message) {
+  const node = byId('credential-modal-feedback');
+  if (!node) {
+    return;
+  }
+  const normalized = humanizeErrorMessage(String(message ?? ''));
+  if (!normalized) {
+    node.textContent = '';
+    node.classList.remove('is-visible');
+    return;
+  }
+  node.textContent = normalized;
+  node.classList.add('is-visible');
+  node.dataset.kind = kind;
+}
+
+function clearCredentialModalFeedback() {
+  setCredentialModalFeedback('error', '');
+}
+
+function clearCredentialFieldErrors() {
+  [
+    'credential-name',
+    'credential-id',
+    'credential-service',
+    'credential-domains',
+    'credential-secret',
+    'credential-user-context',
+    'credential-llm-context',
+  ].forEach(function(fieldId) {
+    const input = byId(fieldId);
+    const container = input?.closest('.field, .field-wide');
+    const errorNode = byId(fieldId + '-error');
+    container?.classList.remove('has-error');
+    if (errorNode) {
+      errorNode.textContent = '';
+      errorNode.classList.remove('is-visible');
+    }
+  });
+}
+
+function setCredentialFieldErrors(fieldErrors) {
+  clearCredentialFieldErrors();
+  Object.entries(fieldErrors || {}).forEach(function([fieldId, message]) {
+    if (!message) {
+      return;
+    }
+    const input = byId(fieldId);
+    const container = input?.closest('.field, .field-wide');
+    const errorNode = byId(fieldId + '-error');
+    container?.classList.add('has-error');
+    if (errorNode) {
+      errorNode.textContent = humanizeErrorMessage(String(message));
+      errorNode.classList.add('is-visible');
+    }
+  });
 }
 
 function setBusy(value) {
@@ -907,6 +1317,7 @@ function persistSession() {
     sessionClientId: state.sessionClientId,
     sessionScopes: state.sessionScopes,
     sessionTenantId: state.sessionTenantId,
+    connectTab: state.connectTab,
     advancedVisible: state.advancedVisible
   };
   localStorage.setItem(storageKey, JSON.stringify(payload));
@@ -926,6 +1337,7 @@ function loadPersistedSession() {
     state.sessionClientId = parsed.sessionClientId || '';
     state.sessionScopes = parsed.sessionScopes || '';
     state.sessionTenantId = parsed.sessionTenantId || '';
+    state.connectTab = parsed.connectTab || 'codex';
     state.advancedVisible = parsed.advancedVisible === true;
   } catch (_error) {
     localStorage.removeItem(storageKey);
@@ -948,6 +1360,7 @@ function clearSession() {
   state.currentCredentialContext = null;
   state.lastMcpConnection = null;
   state.mcpToken = '';
+  state.connectTab = 'codex';
   state.advancedVisible = false;
   state.credentialIdManuallyEdited = false;
   localStorage.removeItem(storageKey);
@@ -955,6 +1368,15 @@ function clearSession() {
   renderAll();
 }
 
+function handleExpiredSession() {
+  clearSession();
+  if (state.localQuickstartEnabled) {
+    setNotice('warning', 'Your saved session expired. Start working locally to open a fresh session, then try again.');
+    return;
+  }
+  setNotice('warning', 'Your saved session expired. Open a new operator session, then try again.');
+}
+
 function syncSessionFields() {
   byId('base-url').value = state.baseUrl;
   byId('resource').value = state.resource;
@@ -1049,6 +1471,10 @@ async function fetchJson(path, options) {
     return { error: 'Unable to parse server response.' };
   });
   if (!response.ok) {
+    if (response.status === 401 && state.token) {
+      handleExpiredSession();
+      throw new Error('Session expired. Open a fresh session and try again.');
+    }
     throw new Error(payload.error || ('Request failed with status ' + response.status));
   }
   return payload;
@@ -1124,25 +1550,40 @@ function renderCoreJourney() {
       : !hasTest
         ? 'Run Test Credential to verify the broker path.'
         : !hasConnection
-          ? 'Open Connect your AI tool, copy a snippet, and try the first prompt.'
+          ? 'Open Connect your AI tool, copy the setup for Codex, Gemini, or Claude, and try the first prompt.'
           : 'Restart your MCP client and try the suggested first prompt.';
 
+  const steps = !state.token
+    ? [
+        '<article class="step-card"><span class="state-warning">Step 1</span><h3>Open a session</h3><p>Use local quickstart or manual sign-in so KeyLore can save and test tokens for you.</p><div class="panel-actions"><button class="button-secondary" type="button" data-nav-target="login-panel">Go there</button></div></article>',
+        '<article class="step-card"><span class="' + (hasCredential ? 'state-active' : 'state-warning') + '">Step 2</span><h3>Add a token</h3><p>Pick a template, paste the token, and explain when the AI should use it.</p><div class="panel-actions"><button class="button-secondary" type="button" data-nav-target="credentials-section">Open tokens</button></div></article>',
+        '<article class="step-card"><span class="' + (hasTest ? 'state-active' : 'state-warning') + '">Step 3</span><h3>Test it safely</h3><p>Run a brokered check to confirm the token works without exposing the secret.</p><div class="panel-actions"><button class="button-secondary" type="button" data-nav-target="credentials-section">Open test</button></div></article>',
+        '<article class="step-card"><span class="' + (hasConnection ? 'state-active' : 'state-warning') + '">Step 4</span><h3>Connect your AI tool</h3><p>Choose Codex, Gemini, or Claude, follow the setup steps, then try the suggested prompt.</p><div class="panel-actions"><button class="button-secondary" type="button" data-nav-target="connect-section">Open connect</button></div></article>',
+      ]
+    : [
+        '<article class="step-card"><span class="' + (hasCredential ? 'state-active' : 'state-warning') + '">Step 1</span><h3>Add a token</h3><p>Pick a template, paste the token, and explain when the AI should use it.</p><div class="panel-actions"><button class="button-secondary" type="button" id="journey-open-token-modal">Add token</button></div></article>',
+        '<article class="step-card"><span class="' + (hasTest ? 'state-active' : 'state-warning') + '">Step 2</span><h3>Test it safely</h3><p>Run a brokered check to confirm the token works without exposing the secret.</p><div class="panel-actions"><button class="button-secondary" type="button" data-nav-target="credentials-section">Open test</button></div></article>',
+        '<article class="step-card"><span class="' + (hasConnection ? 'state-active' : 'state-warning') + '">Step 3</span><h3>Connect your AI tool</h3><p>Choose Codex, Gemini, or Claude, follow the setup steps, then try the suggested prompt.</p><div class="panel-actions"><button class="button-secondary" type="button" data-nav-target="connect-section">Open connect</button></div></article>',
+      ];
+
   node.innerHTML = [
-    '<div class="section-heading"><div><h2 style="font-size:1.4rem;">What to do next</h2><p>Follow the short path. Everything else can wait until later.</p></div></div>',
+    '<div class="section-heading"><div><h2 style="font-size:1.4rem;">Step by step</h2><p>Follow the short path. Everything else can wait until later.</p></div></div>',
     '<div class="step-grid">',
-    '<article class="step-card"><span class="' + (state.token ? 'state-active' : 'state-warning') + '">Step 1</span><h3>Open a session</h3><p>Use local quickstart or manual sign-in so KeyLore can save and test tokens for you.</p><div class="panel-actions"><button class="button-secondary" type="button" data-nav-target="' + escapeHtml(state.token ? 'session-section' : 'login-panel') + '">Go there</button></div></article>',
-    '<article class="step-card"><span class="' + (hasCredential ? 'state-active' : 'state-warning') + '">Step 2</span><h3>Save a token</h3><p>Pick a template, paste the token, and explain when the AI should use it.</p><div class="panel-actions"><button class="button-secondary" type="button" data-nav-target="credentials-section">Open tokens</button></div></article>',
-    '<article class="step-card"><span class="' + (hasTest ? 'state-active' : 'state-warning') + '">Step 3</span><h3>Test it safely</h3><p>Run a brokered check to confirm the token works without exposing the secret.</p><div class="panel-actions"><button class="button-secondary" type="button" data-nav-target="credentials-section">Open test</button></div></article>',
-    '<article class="step-card"><span class="' + (hasConnection ? 'state-active' : 'state-warning') + '">Step 4</span><h3>Connect your AI tool</h3><p>Copy the Codex or Gemini snippet, restart the tool, and try the suggested prompt.</p><div class="panel-actions"><button class="button-secondary" type="button" data-nav-target="connect-section">Open connect</button></div></article>',
+    steps.join(''),
     '</div>',
     '<p class="panel-footnote" style="margin-top:12px;"><strong>Next:</strong> ' + escapeHtml(nextAction) + '</p>'
   ].join('');
+
+  const journeyOpenTokenModal = byId('journey-open-token-modal');
+  if (journeyOpenTokenModal) {
+    journeyOpenTokenModal.addEventListener('click', openCreateCredentialModal);
+  }
 }
 
 function renderCredentials() {
   byId('credential-list').innerHTML = renderResultState(state.data.credentials, function(payload) {
     if (!payload.credentials.length) {
-      return '<div class="empty-state">No credentials are visible yet. Start with a template, save a token, then use Test Credential as the next step.</div>';
+      return '<div class="empty-state">No tokens are saved yet. Use Add token to create the first one.</div>';
     }
 
     function renderCredentialCard(credential) {
@@ -1150,25 +1591,25 @@ function renderCredentials() {
       const statusActionLabel = credential.status === 'active' ? 'Archive' : 'Restore';
       const isNew = credential.id === state.lastCreatedCredentialId;
       const isSelected = credential.id === state.selectedCredentialId;
+      const ownershipLabel = credential.owner === 'local' ? 'saved token' : 'example';
       return [
-        '<article class="list-card">',
+        '<article class="token-row">',
         '<div class="toolbar"><div><h3>' + escapeHtml(credential.displayName) + '</h3><p class="mono"><strong>Token key:</strong> ' + escapeHtml(credential.id) + '</p></div><div class="panel-actions">' + (isNew ? '<span class="state-active">Just added</span>' : '') + (isSelected ? '<span class="state-ok">Selected</span>' : '') + '<span class="' + (credential.status === 'active' ? 'state-active' : 'state-disabled') + '">' + escapeHtml(credential.status) + '</span></div></div>',
         '<div class="list-meta">',
+        '<span class="pill"><strong>Kind</strong> ' + escapeHtml(ownershipLabel) + '</span>',
         '<span class="pill"><strong>Service</strong> ' + escapeHtml(credential.service) + '</span>',
         '<span class="pill"><strong>Scope</strong> ' + escapeHtml(credential.scopeTier) + '</span>',
         '<span class="pill"><strong>Sensitivity</strong> ' + escapeHtml(credential.sensitivity) + '</span>',
         '</div>',
-        '<p class="panel-footnote">' + escapeHtml(credential.selectionNotes) + '</p>',
+        '<p class="panel-footnote"><strong>LLM context:</strong> ' + escapeHtml(credential.llmContext || credential.selectionNotes) + '</p>',
+        '<p class="panel-footnote"><strong>User context:</strong> ' + escapeHtml(credential.userContext || credential.llmContext || credential.selectionNotes) + '</p>',
         '<p class="muted-copy mono">Domains: ' + escapeHtml(credential.allowedDomains.join(', ')) + '</p>',
-        '<div class="panel-actions"><button class="button-secondary" type="button" data-credential-context-action="open" data-credential-context-id="' + escapeHtml(credential.id) + '">Edit AI notes</button></div>',
-        '<details class="disclosure"><summary>More actions</summary><div class="panel-actions"><button class="button-secondary" type="button" data-credential-context-action="rename" data-credential-context-id="' + escapeHtml(credential.id) + '" data-credential-context-name="' + escapeHtml(credential.displayName) + '">Rename</button><button class="button-secondary" type="button" data-credential-context-action="retag" data-credential-context-id="' + escapeHtml(credential.id) + '" data-credential-context-tags="' + escapeHtml(credential.tags.join(', ')) + '">Retag</button><button class="button-secondary" type="button" data-credential-context-action="status" data-credential-context-id="' + escapeHtml(credential.id) + '" data-credential-context-status="' + escapeHtml(nextStatus) + '">' + statusActionLabel + '</button>' + (credential.owner === 'local' ? '<button class="button-danger" type="button" data-credential-context-action="delete" data-credential-context-id="' + escapeHtml(credential.id) + '" data-credential-context-name="' + escapeHtml(credential.displayName) + '">Delete</button>' : '') + '</div></details>',
+        '<div class="panel-actions"><button class="button-secondary" type="button" data-credential-context-action="open" data-credential-context-id="' + escapeHtml(credential.id) + '">Edit token</button><button class="button-secondary" type="button" data-credential-context-action="test" data-credential-context-id="' + escapeHtml(credential.id) + '">Use in test</button><button class="button-secondary" type="button" data-credential-context-action="status" data-credential-context-id="' + escapeHtml(credential.id) + '" data-credential-context-status="' + escapeHtml(nextStatus) + '">' + statusActionLabel + '</button><button class="button-danger" type="button" data-credential-context-action="delete" data-credential-context-id="' + escapeHtml(credential.id) + '" data-credential-context-name="' + escapeHtml(credential.displayName) + '">Delete</button></div>',
         '</article>'
       ].join('');
     }
 
-    const ownCredentials = payload.credentials.filter(function(credential) {
-      return credential.owner === 'local';
-    }).sort(function(left, right) {
+    const credentials = payload.credentials.slice().sort(function(left, right) {
       if (left.id === state.lastCreatedCredentialId) {
         return -1;
       }
@@ -1181,22 +1622,12 @@ function renderCredentials() {
       if (right.id === state.selectedCredentialId) {
         return 1;
       }
+      if (left.owner !== right.owner) {
+        return left.owner === 'local' ? -1 : 1;
+      }
       return left.displayName.localeCompare(right.displayName);
     });
-    const starterCredentials = payload.credentials.filter(function(credential) {
-      return credential.owner !== 'local';
-    }).sort(function(left, right) {
-      return left.displayName.localeCompare(right.displayName);
-    });
-
-    return [
-      ownCredentials.length
-        ? '<div class="stack-tight"><div><h3 style="margin:0 0 8px;">Your tokens</h3><p class="panel-footnote" style="margin-top:0;">These are the tokens you added yourself.</p></div>' + ownCredentials.map(renderCredentialCard).join('') + '</div>'
-        : '<div class="empty-state">You have not added a token yet. When you save one, it will appear here with a clear token key.</div>',
-      starterCredentials.length
-        ? '<div class="stack-tight" style="margin-top:16px;"><div><h3 style="margin:0 0 8px;">Included examples</h3><p class="panel-footnote" style="margin-top:0;">These example entries ship with the local setup. They are not the tokens you just added.</p></div>' + starterCredentials.map(renderCredentialCard).join('') + '</div>'
-        : ''
-    ].join('');
+    return '<div class="token-list">' + credentials.map(renderCredentialCard).join('') + '</div>';
   });
 
   if (!state.data.credentials) {
@@ -1204,24 +1635,10 @@ function renderCredentials() {
   } else if (!state.data.credentials.ok) {
     byId('credential-test-id').innerHTML = '<option value="">Credentials unavailable</option>';
   } else {
-    const ownCredentials = state.data.credentials.data.credentials.filter(function(credential) {
-      return credential.owner === 'local';
-    });
-    const starterCredentials = state.data.credentials.data.credentials.filter(function(credential) {
-      return credential.owner !== 'local';
-    });
-    byId('credential-test-id').innerHTML = [
-      ownCredentials.length
-        ? '<optgroup label="Your tokens">' + ownCredentials.map(function(credential) {
-            return '<option value="' + escapeHtml(credential.id) + '">' + escapeHtml(credential.displayName + ' (' + credential.id + ')') + '</option>';
-          }).join('') + '</optgroup>'
-        : '',
-      starterCredentials.length
-        ? '<optgroup label="Included examples">' + starterCredentials.map(function(credential) {
-            return '<option value="' + escapeHtml(credential.id) + '">' + escapeHtml(credential.displayName + ' (' + credential.id + ')') + '</option>';
-          }).join('') + '</optgroup>'
-        : ''
-    ].join('');
+    byId('credential-test-id').innerHTML = state.data.credentials.data.credentials.map(function(credential) {
+      const label = credential.owner === 'local' ? 'saved' : 'example';
+      return '<option value="' + escapeHtml(credential.id) + '">' + escapeHtml(credential.displayName + ' (' + credential.id + ', ' + label + ')') + '</option>';
+    }).join('');
   }
 
   if (state.lastCredentialTest) {
@@ -1249,6 +1666,19 @@ function renderCredentials() {
   renderCredentialContextManager();
 }
 
+function renderCredentialTestError(message) {
+  const friendly = humanizeErrorMessage(message);
+  byId('credential-test-result').innerHTML = [
+    '<div class="list-card" style="border-color: rgba(143, 45, 35, 0.2); background: rgba(143, 45, 35, 0.06);">',
+    '<h3 style="margin:0 0 8px;">Token check failed</h3>',
+    '<p><strong>Token:</strong> ' + escapeHtml(state.lastCredentialTestContext?.credentialId || 'the selected token') + '</p>',
+    '<p><strong>URL:</strong> <span class="mono">' + escapeHtml(state.lastCredentialTestContext?.targetUrl || 'the selected URL') + '</span></p>',
+    '<p>' + escapeHtml(friendly) + '</p>',
+    '<div class="panel-footnote">Use <strong>Edit token</strong> to paste a replacement token and save changes.</div>',
+    '</div>'
+  ].join('');
+}
+
 function visibleCredentials() {
   return state.data.credentials && state.data.credentials.ok
     ? state.data.credentials.data.credentials
@@ -1265,14 +1695,28 @@ function selectedCredentialSummary() {
 function credentialContextAssessment(payload) {
   const errors = [];
   const warnings = [];
-  const notes = String(payload.selectionNotes || '');
-  const normalizedNotes = notes.trim().toLowerCase();
-  if (!notes.trim()) {
-    errors.push('Selection notes are required. Explain when the agent should use this credential.');
-  } else if (notes.trim().length < 16) {
-    errors.push('Selection notes are too short. Add enough detail for the agent to distinguish this credential from others.');
-  } else if (notes.trim().length < 40) {
-    warnings.push('Selection notes are short. Add when-to-use guidance so the agent can choose this credential reliably.');
+  const fieldErrors = {};
+  const llmContext = String(payload.llmContext || payload.selectionNotes || '');
+  const userContext = String(payload.userContext || '');
+  const normalizedLlmContext = llmContext.trim().toLowerCase();
+  if (!llmContext.trim()) {
+    const message = 'LLM context is required. Explain when the agent should use this credential.';
+    errors.push(message);
+    fieldErrors['credential-llm-context'] = message;
+  } else if (llmContext.trim().length < 16) {
+    const message = 'LLM context is too short. Add enough detail for the agent to distinguish this credential from others.';
+    errors.push(message);
+    fieldErrors['credential-llm-context'] = message;
+  } else if (llmContext.trim().length < 40) {
+    warnings.push('LLM context is short. Add when-to-use guidance so the agent can choose this credential reliably.');
+  }
+
+  if (!userContext.trim()) {
+    const message = 'User context is required. Explain the human purpose of this credential.';
+    errors.push(message);
+    fieldErrors['credential-user-context'] = message;
+  } else if (userContext.trim().length < 24) {
+    warnings.push('User context is short. Add ownership, intent, or caveats so humans can understand why this credential exists.');
   }
 
   if (!payload.allowedDomains || !payload.allowedDomains.length) {
@@ -1283,45 +1727,57 @@ function credentialContextAssessment(payload) {
     warnings.push('Permitted operations are empty. The preview should make the intended read or write capability explicit.');
   }
 
-  if (/^(use when needed|general use|general purpose|for api|api token|token for api|default token|main token)$/i.test(normalizedNotes)) {
-    errors.push('Selection notes are too vague. Say what the credential is for, when the agent should choose it, and what it should avoid.');
+  if (/^(use when needed|general use|general purpose|for api|api token|token for api|default token|main token)$/i.test(normalizedLlmContext)) {
+    const message = 'LLM context is too vague. Say what the credential is for, when the agent should choose it, and what it should avoid.';
+    errors.push(message);
+    fieldErrors['credential-llm-context'] = message;
   }
 
-  if (/(gh[pousr]_[A-Za-z0-9_]+|github_pat_|sk-[A-Za-z0-9_-]+|AKIA[0-9A-Z]{16})/.test(notes)) {
-    errors.push('Selection notes look like they may contain a secret. Keep raw tokens out of the agent-visible context.');
+  if (/(gh[pousr]_[A-Za-z0-9_]+|github_pat_|sk-[A-Za-z0-9_-]+|AKIA[0-9A-Z]{16})/.test(llmContext + '\n' + userContext)) {
+    const message = 'Context text looks like it may contain a secret. Keep raw tokens out of the human and agent-visible context.';
+    errors.push(message);
+    fieldErrors['credential-user-context'] = fieldErrors['credential-user-context'] || message;
+    fieldErrors['credential-llm-context'] = fieldErrors['credential-llm-context'] || message;
   }
 
-  return { errors: errors, warnings: warnings };
+  return { errors: errors, warnings: warnings, fieldErrors: fieldErrors };
 }
 
-function credentialGuidanceForTemplate() {
-  const template = byId('credential-template').value;
-  if (template === 'github-readonly') {
+function credentialGuidance() {
+  const service = byId('credential-service')?.value.trim().toLowerCase();
+  const operations = splitList(byId('credential-operations')?.value || '');
+  const canWrite = operations.includes('http.post');
+  if (service === 'github' && !canWrite) {
     return {
-      good: 'Use for GitHub repository metadata, issues, pull requests, and rate-limit reads. Never use it for write operations.',
-      avoid: 'GitHub token'  
+      good: 'LLM: Use for GitHub repository metadata, issues, pull requests, and rate-limit reads. Never use it for write operations.',
+      user: 'User: Primary read-only GitHub token for routine repository lookups.',
+      avoid: 'GitHub token'
     };
   }
-  if (template === 'github-write') {
+  if (service === 'github' && canWrite) {
     return {
-      good: 'Use for GitHub workflows that need authenticated reads plus controlled writes such as issue comments, labels, or pull request updates. Prefer the read-only GitHub credential when writes are not needed.',
+      good: 'LLM: Use for GitHub workflows that need authenticated reads plus controlled writes such as issue comments, labels, or pull request updates. Prefer the read-only GitHub credential when writes are not needed.',
+      user: 'User: Higher-risk GitHub token for controlled write workflows.',
       avoid: 'Main GitHub token'
     };
   }
-  if (template === 'npm-readonly') {
+  if (service === 'npm') {
     return {
-      good: 'Use for npm package metadata, dependency lookup, and registry read operations. Do not use it for publish workflows.',
+      good: 'LLM: Use for npm package metadata, dependency lookup, and registry read operations. Do not use it for publish workflows.',
+      user: 'User: Read-only npm registry token for package inspection.',
       avoid: 'npm token'
     };
   }
-  if (template === 'internal-service') {
+  if (service && (service.includes('internal') || service.includes('private'))) {
     return {
-      good: 'Use only for the listed internal service domain when the task explicitly targets that API. Avoid unrelated external services.',
+      good: 'LLM: Use only for the listed internal service domain when the task explicitly targets that API. Avoid unrelated external services.',
+      user: 'User: Internal service credential scoped to one API or workflow.',
       avoid: 'Internal token'
     };
   }
   return {
-    good: 'Describe the target service, the intended domain, when the agent should choose this credential, and what kinds of actions it should avoid.',
+    good: 'LLM: Describe the target service, the intended domain, when the agent should choose this credential, and what kinds of actions it should avoid.',
+    user: 'User: Describe why this token exists, who it is for, and any caveats for humans.',
     avoid: 'Use when needed'
   };
 }
@@ -1331,11 +1787,12 @@ function renderCredentialGuidance() {
   if (!node) {
     return;
   }
-  const guidance = credentialGuidanceForTemplate();
+  const guidance = credentialGuidance();
   node.innerHTML = [
-    '<div class="panel-footnote"><strong>Good context:</strong> ' + escapeHtml(guidance.good) + '</div>',
+    '<div class="panel-footnote"><strong>Good LLM context:</strong> ' + escapeHtml(guidance.good) + '</div>',
+    '<div class="panel-footnote"><strong>Good user context:</strong> ' + escapeHtml(guidance.user) + '</div>',
     '<div class="panel-footnote"><strong>Avoid:</strong> ' + escapeHtml(guidance.avoid) + '</div>',
-    '<div class="panel-footnote">Good notes should answer: what service is this for, when should the agent choose it, and what should it avoid doing?</div>'
+    '<div class="panel-footnote">LLM context should answer: when should the agent choose this credential, and what should it avoid doing? User context should explain the human purpose and ownership.</div>'
   ].join('');
 }
 
@@ -1361,23 +1818,22 @@ function renderCredentialPreview() {
       expiresAt: payload.expiresAt || null,
       rotationPolicy: payload.rotationPolicy || 'Managed locally',
       lastValidatedAt: null,
-      selectionNotes: payload.selectionNotes || '',
+      userContext: payload.userContext || '',
+      llmContext: payload.llmContext || payload.selectionNotes || '',
+      selectionNotes: payload.llmContext || payload.selectionNotes || '',
       tags: payload.tags,
       status: payload.status,
     },
   };
 
   previewNode.innerHTML = '<pre>' + escapeHtml(prettyJson(preview)) + '</pre>';
-  const assessment = credentialContextAssessment(payload);
+  const assessment = validateCredentialFormPayload(payload);
   const messages = [];
-  assessment.errors.forEach(function(message) {
-    messages.push('<div class="error-state">' + escapeHtml(message) + '</div>');
-  });
   assessment.warnings.forEach(function(message) {
     messages.push('<div class="panel-footnote">' + escapeHtml(message) + '</div>');
   });
   if (!messages.length) {
-    messages.push('<div class="panel-footnote">This is the MCP-visible metadata shape. Secret storage details, binding refs, and raw token values do not appear here.</div>');
+    messages.push('<div class="panel-footnote">This is the MCP-visible metadata shape. Secret storage details, binding refs, and raw token values do not appear here. KeyLore also mirrors <span class="mono">llmContext</span> into <span class="mono">selectionNotes</span> for older clients.</div>');
   }
   warningNode.innerHTML = messages.join('');
   renderCredentialGuidance();
@@ -1404,7 +1860,9 @@ function renderContextPreview(previewNodeId, warningNodeId, payload, currentId)
       expiresAt: null,
       rotationPolicy: 'Managed separately',
       lastValidatedAt: null,
-      selectionNotes: payload.selectionNotes || '',
+      userContext: payload.userContext || '',
+      llmContext: payload.llmContext || payload.selectionNotes || '',
+      selectionNotes: payload.llmContext || payload.selectionNotes || '',
       tags: payload.tags,
       status: payload.status || 'active',
     },
@@ -1420,7 +1878,7 @@ function renderContextPreview(previewNodeId, warningNodeId, payload, currentId)
     messages.push('<div class="panel-footnote">' + escapeHtml(message) + '</div>');
   });
   if (!messages.length) {
-    messages.push('<div class="panel-footnote">This preview is agent-facing metadata only. Secret bindings and raw tokens stay separate and are not editable here.</div>');
+    messages.push('<div class="panel-footnote">This preview is metadata only. Secret bindings and raw tokens stay separate and are not editable here. Older clients still receive <span class="mono">selectionNotes</span> as a compatibility alias of <span class="mono">llmContext</span>.</div>');
   }
   warningNode.innerHTML = messages.join('');
 }
@@ -1435,7 +1893,8 @@ function populateCredentialContextForm(credential) {
     ? 'http.get,http.post'
     : 'http.get';
   byId('credential-context-domains').value = credential.allowedDomains.join(', ');
-  byId('credential-context-notes').value = credential.selectionNotes;
+  byId('credential-context-user-context').value = credential.userContext || credential.llmContext || credential.selectionNotes;
+  byId('credential-context-llm-context').value = credential.llmContext || credential.selectionNotes;
   byId('credential-context-tags').value = credential.tags.join(', ');
 }
 
@@ -1449,7 +1908,9 @@ function serializeCredentialContextForm() {
     status: byId('credential-context-status').value,
     allowedDomains: splitList(byId('credential-context-domains').value),
     permittedOperations: operations.length ? operations : ['http.get'],
-    selectionNotes: byId('credential-context-notes').value.trim(),
+    userContext: byId('credential-context-user-context').value.trim(),
+    llmContext: byId('credential-context-llm-context').value.trim(),
+    selectionNotes: byId('credential-context-llm-context').value.trim(),
     tags: splitList(byId('credential-context-tags').value),
   };
 }
@@ -1481,6 +1942,81 @@ function renderCredentialContextManager() {
   );
 }
 
+function applyCredentialDefaults() {
+  byId('credential-storage').value = 'local';
+  byId('credential-service').value = '';
+  byId('credential-sensitivity').value = 'high';
+  byId('credential-operations').value = 'http.get';
+  byId('credential-tags').value = '';
+  byId('credential-domains').value = '';
+  byId('credential-user-context').value = '';
+  byId('credential-llm-context').value = '';
+}
+
+function resetCredentialFormForCreate() {
+  state.credentialModalMode = 'create';
+  state.credentialIdManuallyEdited = false;
+  clearCredentialModalFeedback();
+  clearCredentialFieldErrors();
+  byId('credential-modal-title').textContent = 'Add token';
+  byId('credential-modal-copy').textContent = 'Paste the token, add the human and AI context, and save it into KeyLore.';
+  byId('credential-submit').dataset.idleLabel = 'Save token';
+  byId('credential-submit').textContent = 'Save token';
+  byId('credential-form').reset();
+  applyCredentialDefaults();
+  byId('credential-id').readOnly = false;
+  byId('credential-secret-field').hidden = false;
+  byId('credential-secret-label').textContent = 'Paste token';
+  byId('credential-secret').value = '';
+  byId('credential-secret').placeholder = 'Paste the raw token here. KeyLore stores it outside the searchable metadata catalogue.';
+  byId('credential-secret').disabled = false;
+  byId('credential-storage').disabled = false;
+  syncCredentialSourceFields();
+  renderCredentialPreview();
+}
+
+function openCreateCredentialModal() {
+  resetCredentialFormForCreate();
+  showDialog('credential-modal');
+}
+
+function openEditCredentialModal(credential) {
+  state.credentialModalMode = 'edit';
+  state.selectedCredentialId = credential.id;
+  state.currentCredentialContext = credential;
+  clearCredentialModalFeedback();
+  clearCredentialFieldErrors();
+  byId('credential-modal-title').textContent = 'Edit token';
+  byId('credential-modal-copy').textContent = 'Update the token metadata and context. Stored secret material stays separate and is not shown here.';
+  byId('credential-submit').dataset.idleLabel = 'Save changes';
+  byId('credential-submit').textContent = 'Save changes';
+  byId('credential-name').value = credential.displayName;
+  byId('credential-id').value = credential.id;
+  byId('credential-id').readOnly = true;
+  byId('credential-service').value = credential.service;
+  byId('credential-sensitivity').value = credential.sensitivity;
+  byId('credential-operations').value = credential.permittedOperations.includes('http.post')
+    ? 'http.get,http.post'
+    : 'http.get';
+  byId('credential-domains').value = credential.allowedDomains.join(', ');
+  byId('credential-user-context').value = credential.userContext || credential.llmContext || credential.selectionNotes;
+  byId('credential-llm-context').value = credential.llmContext || credential.selectionNotes;
+  byId('credential-tags').value = credential.tags.join(', ');
+  const localOwner = credential.owner === 'local';
+  byId('credential-storage').value = credential.binding?.adapter === 'env' ? 'env' : 'local';
+  byId('credential-storage').disabled = true;
+  byId('credential-secret-field').hidden = !localOwner;
+  byId('credential-secret-label').textContent = 'Replace stored token (optional)';
+  byId('credential-secret').value = '';
+  byId('credential-secret').placeholder = localOwner
+    ? 'Paste a replacement token only if you want to update the stored secret.'
+    : 'Secret replacement is only available for locally stored tokens.';
+  byId('credential-secret').disabled = !localOwner;
+  byId('credential-env-ref-field').hidden = true;
+  renderCredentialPreview();
+  showDialog('credential-modal');
+}
+
 async function openCredentialContext(credentialId) {
   const result = await fetchJson('/v1/core/credentials/' + encodeURIComponent(credentialId) + '/context');
   state.selectedCredentialId = credentialId;
@@ -1493,20 +2029,90 @@ function renderConnect() {
   byId('codex-http-snippet').value = codexHttpSnippet();
   byId('gemini-stdio-snippet').value = geminiStdioSnippet();
   byId('gemini-http-snippet').value = geminiHttpSnippet();
+  byId('claude-stdio-snippet').value = claudeStdioSnippet();
+  byId('claude-http-snippet').value = claudeHttpSnippet();
   byId('generic-http-snippet').value = genericHttpSnippet();
   byId('mcp-token-export').value = "export KEYLORE_MCP_ACCESS_TOKEN='" + mcpHttpTokenValue() + "'";
   byId('connect-client-id').value = state.localAdminBootstrap ? state.localAdminBootstrap.clientId : (state.sessionClientId || '');
   if (state.localAdminBootstrap && !byId('connect-client-secret').value) {
     byId('connect-client-secret').value = state.localAdminBootstrap.clientSecret;
   }
-  byId('connect-stdio-status').innerHTML = config.stdioAvailable
-    ? '<div class="state-active">stdio entry is available at <span class="mono">' + escapeHtml(config.stdioEntryPath) + '</span></div>'
-    : '<div class="error-state">The stdio entry point was not found at <span class="mono">' + escapeHtml(config.stdioEntryPath) + '</span>.</div>';
-  byId('codex-first-prompt').value = firstPromptForClient('Codex');
-  byId('gemini-first-prompt').value = firstPromptForClient('Gemini');
+  byId('shared-first-prompt').value = firstPrompt();
   byId('connect-result').innerHTML = state.lastMcpConnection
     ? '<pre>' + escapeHtml(prettyJson(state.lastMcpConnection)) + '</pre>'
-    : '<div class="empty-state">For local use, copy a stdio snippet and restart your MCP client. For remote HTTP MCP, run the connection check here first.</div>';
+    : '<div class="empty-state">For local use, choose a tool tab, copy the setup snippet or apply it directly, then restart your MCP client. For remote HTTP MCP, run the connection check here first.</div>';
+  renderConnectTabs();
+}
+
+function renderConnectTabs() {
+  document.querySelectorAll('[data-connect-tab]').forEach(function(button) {
+    const isActive = button.getAttribute('data-connect-tab') === state.connectTab;
+    button.classList.toggle('is-active', isActive);
+    button.setAttribute('aria-selected', isActive ? 'true' : 'false');
+  });
+
+  document.querySelectorAll('[data-connect-panel]').forEach(function(panel) {
+    const isActive = panel.getAttribute('data-connect-panel') === state.connectTab;
+    panel.hidden = !isActive;
+  });
+}
+
+async function copySnippet(targetId, label) {
+  const node = byId(targetId);
+  if (!(node instanceof HTMLTextAreaElement || node instanceof HTMLInputElement)) {
+    setNotice('error', 'Nothing to copy for ' + label + '.');
+    return;
+  }
+  await navigator.clipboard.writeText(node.value);
+  setNotice('info', label + ' copied to clipboard.');
+}
+
+async function handleCopyAction(event) {
+  const button = event.target instanceof Element ? event.target.closest('[data-copy-target]') : null;
+  if (!button) {
+    return;
+  }
+  const targetId = button.getAttribute('data-copy-target');
+  const label = button.getAttribute('data-copy-label') || 'Snippet';
+  if (!targetId) {
+    return;
+  }
+  try {
+    await copySnippet(targetId, label);
+  } catch (error) {
+    setNotice('error', error instanceof Error ? error.message : String(error));
+  }
+}
+
+async function handleApplyToolSetup(event) {
+  const button = event.target instanceof Element ? event.target.closest('[data-apply-tool]') : null;
+  if (!button) {
+    return;
+  }
+  const tool = button.getAttribute('data-apply-tool');
+  if (!tool) {
+    return;
+  }
+  const result = await withAction('Applied local ' + tool + ' setup.', async function() {
+    return fetchJson('/v1/core/tooling/apply', {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({ tool: tool })
+    });
+  });
+  setNotice('info', tool.charAt(0).toUpperCase() + tool.slice(1) + ' updated at ' + result.path + '. Restart the tool and try the prompt below.');
+}
+
+function handleConnectTabClick(event) {
+  const button = event.target instanceof Element ? event.target.closest('[data-connect-tab]') : null;
+  if (!button) {
+    return;
+  }
+  state.connectTab = button.getAttribute('data-connect-tab') || 'codex';
+  persistSession();
+  renderConnectTabs();
 }
 
 function renderTenants() {
@@ -1759,80 +2365,14 @@ function serializeAuthClientForm() {
   };
 }
 
-function applyCredentialTemplate() {
-  const template = byId('credential-template').value;
-  state.credentialIdManuallyEdited = false;
-  if (template === 'github-readonly') {
-    byId('credential-name').value = 'GitHub Read-Only Token';
-    byId('credential-service').value = 'github';
-    byId('credential-operations').value = 'http.get';
-    byId('credential-domains').value = 'api.github.com';
-    byId('credential-notes').value = 'Use for GitHub repository metadata, issues, pull requests, and rate-limit reads. Never use it for write operations.';
-    byId('credential-tags').value = 'github,readonly';
-    byId('credential-sensitivity').value = 'high';
-    renderCredentialPreview();
-    return;
-  }
-
-  if (template === 'github-write') {
-    byId('credential-name').value = 'GitHub Write Token';
-    byId('credential-service').value = 'github';
-    byId('credential-operations').value = 'http.get,http.post';
-    byId('credential-domains').value = 'api.github.com';
-    byId('credential-notes').value = 'Use for GitHub workflows that need authenticated reads plus controlled writes such as issue comments, pull request updates, labels, or status changes. Prefer the read-only GitHub credential when writes are not required.';
-    byId('credential-tags').value = 'github,write';
-    byId('credential-sensitivity').value = 'critical';
-    renderCredentialPreview();
-    return;
-  }
-
-  if (template === 'npm-readonly') {
-    byId('credential-name').value = 'npm Read-Only Token';
-    byId('credential-service').value = 'npm';
-    byId('credential-operations').value = 'http.get';
-    byId('credential-domains').value = 'registry.npmjs.org';
-    byId('credential-notes').value = 'Use for npm package metadata, dependency lookup, and registry read operations. Do not use this credential for publish or package mutation workflows.';
-    byId('credential-tags').value = 'npm,readonly';
-    byId('credential-sensitivity').value = 'high';
-    renderCredentialPreview();
-    return;
-  }
-
-  if (template === 'internal-service') {
-    byId('credential-name').value = 'Internal Service Token';
-    byId('credential-service').value = 'internal_api';
-    byId('credential-operations').value = 'http.get,http.post';
-    byId('credential-domains').value = 'internal.example.com';
-    byId('credential-notes').value = 'Use only for the listed internal service domain when the task explicitly targets that service. Keep this credential scoped to the documented internal API workflow and avoid unrelated external APIs.';
-    byId('credential-tags').value = 'internal,bearer';
-    byId('credential-sensitivity').value = 'critical';
-    renderCredentialPreview();
-    return;
-  }
-
-  if (template === 'generic-bearer') {
-    byId('credential-id').value = '';
-    byId('credential-name').value = '';
-    byId('credential-service').value = '';
-    byId('credential-operations').value = 'http.get';
-    byId('credential-domains').value = '';
-    byId('credential-notes').value = '';
-    byId('credential-tags').value = '';
-    byId('credential-sensitivity').value = 'moderate';
-    renderCredentialPreview();
-  }
-
-  syncCredentialIdFromName(true);
-}
-
 function syncCredentialIdFromName(force) {
   if (state.credentialIdManuallyEdited && !force) {
     return;
   }
 
   const name = byId('credential-name').value.trim();
-  const template = byId('credential-template').value;
-  const fallback = template === 'generic-bearer' ? 'token' : template.replace(/[^a-z0-9]+/g, '-');
+  const service = byId('credential-service').value.trim();
+  const fallback = slugifyTokenKey(service || 'token');
   byId('credential-id').value = slugifyTokenKey(name || fallback) + '-local';
   renderCredentialPreview();
 }
@@ -1847,6 +2387,7 @@ function syncCredentialSourceFields() {
 function serializeCredentialForm() {
   const operations = splitList(byId('credential-operations').value);
   const adapter = byId('credential-storage').value;
+  const secretValue = byId('credential-secret').value;
   return {
     credentialId: byId('credential-id').value.trim(),
     displayName: byId('credential-name').value.trim(),
@@ -1856,7 +2397,9 @@ function serializeCredentialForm() {
     sensitivity: byId('credential-sensitivity').value,
     allowedDomains: splitList(byId('credential-domains').value),
     permittedOperations: operations.length ? operations : ['http.get'],
-    selectionNotes: byId('credential-notes').value.trim(),
+    userContext: byId('credential-user-context').value.trim(),
+    llmContext: byId('credential-llm-context').value.trim(),
+    selectionNotes: byId('credential-llm-context').value.trim(),
     tags: splitList(byId('credential-tags').value),
     authType: 'bearer',
     headerName: 'Authorization',
@@ -1864,7 +2407,7 @@ function serializeCredentialForm() {
     secretSource: adapter === 'local'
       ? {
           adapter: 'local',
-          secretValue: byId('credential-secret').value
+          secretValue: secretValue
         }
       : {
           adapter: 'env',
@@ -1873,6 +2416,39 @@ function serializeCredentialForm() {
   };
 }
 
+function validateCredentialFormPayload(payload) {
+  const assessment = credentialContextAssessment(payload);
+  const fieldErrors = { ...assessment.fieldErrors };
+
+  if (!payload.credentialId) {
+    fieldErrors['credential-id'] = 'Token key is required.';
+  }
+  if (!payload.displayName) {
+    fieldErrors['credential-name'] = 'Name shown in KeyLore is required.';
+  }
+  if (!payload.service) {
+    fieldErrors['credential-service'] = 'Service name is required.';
+  }
+  if (!payload.allowedDomains?.length) {
+    fieldErrors['credential-domains'] = 'Add at least one allowed domain so the token is clearly scoped.';
+  }
+  if (payload.secretSource?.adapter === 'local' && state.credentialModalMode === 'create' && !payload.secretSource.secretValue.trim()) {
+    fieldErrors['credential-secret'] = 'Paste the token before saving.';
+  }
+
+  const errorValues = Object.values(fieldErrors);
+  return {
+    errors: [
+      ...errorValues,
+      ...assessment.errors.filter(function(message) {
+        return !errorValues.includes(message);
+      }),
+    ],
+    warnings: assessment.warnings,
+    fieldErrors: fieldErrors,
+  };
+}
+
 function syncCredentialTestDefaults(force) {
   const credentials = state.data.credentials && state.data.credentials.ok
     ? state.data.credentials.data.credentials
@@ -1950,65 +2526,117 @@ async function handleLocalQuickstartLogin() {
 async function handleCreateCredential(event) {
   event.preventDefault();
   const payload = serializeCredentialForm();
-  const assessment = credentialContextAssessment(payload);
+  const assessment = validateCredentialFormPayload(payload);
   if (assessment.errors.length) {
     renderCredentialPreview();
+    setCredentialFieldErrors(assessment.fieldErrors);
+    setCredentialModalFeedback('error', assessment.errors[0]);
     setNotice('error', assessment.errors[0]);
     return;
   }
-  const result = await withAction('Credential created. Next: run Test Credential or inspect the saved context.', async function() {
-    try {
-      return await fetchJson('/v1/core/credentials', {
-        method: 'POST',
-        headers: {
-          'content-type': 'application/json'
-        },
-        body: JSON.stringify(payload)
-      });
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      if (message.includes('already exists')) {
-        throw new Error('Token key "' + payload.credentialId + '" is already in use. Change the Token key field and save again.');
+  clearCredentialModalFeedback();
+  clearCredentialFieldErrors();
+  try {
+    const result = await withAction(
+      state.credentialModalMode === 'edit'
+        ? 'Token updated.'
+        : 'Token created. Next: run Test Credential or connect your AI tool.'
+      ,
+      async function() {
+        if (state.credentialModalMode === 'edit') {
+          const contextResult = await fetchJson('/v1/core/credentials/' + encodeURIComponent(payload.credentialId) + '/context', {
+            method: 'PATCH',
+            headers: {
+              'content-type': 'application/json'
+            },
+            body: JSON.stringify({
+              displayName: payload.displayName,
+              service: payload.service,
+              scopeTier: payload.scopeTier,
+              sensitivity: payload.sensitivity,
+              allowedDomains: payload.allowedDomains,
+              permittedOperations: payload.permittedOperations,
+              userContext: payload.userContext,
+              llmContext: payload.llmContext,
+              selectionNotes: payload.llmContext,
+              tags: payload.tags,
+            })
+          });
+          if (payload.secretSource.adapter === 'local' && payload.secretSource.secretValue.trim()) {
+            await fetchJson('/v1/core/credentials/' + encodeURIComponent(payload.credentialId) + '/local-secret', {
+              method: 'POST',
+              headers: {
+                'content-type': 'application/json'
+              },
+              body: JSON.stringify({
+                secretValue: payload.secretSource.secretValue.trim()
+              })
+            });
+          }
+          return contextResult;
+        }
+        try {
+          return await fetchJson('/v1/core/credentials', {
+            method: 'POST',
+            headers: {
+              'content-type': 'application/json'
+            },
+            body: JSON.stringify(payload)
+          });
+        } catch (error) {
+          const message = error instanceof Error ? error.message : String(error);
+          if (message.includes('already exists')) {
+            const duplicateMessage = 'Token key "' + payload.credentialId + '" is already in use. Change the Token key field and save again.';
+            setCredentialFieldErrors({ 'credential-id': duplicateMessage });
+            throw new Error(duplicateMessage);
+          }
+          throw error;
+        }
       }
-      throw error;
+    );
+    state.lastCreatedCredentialId = result.credential.id;
+    state.selectedCredentialId = result.credential.id;
+    state.currentCredentialContext = result.credential;
+    closeDialog('credential-modal');
+    resetCredentialFormForCreate();
+    syncCredentialTestDefaults(true);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    if (message.includes('already exists')) {
+      setCredentialFieldErrors({ 'credential-id': message });
     }
-  });
-  state.lastCreatedCredentialId = result.credential.id;
-  state.selectedCredentialId = result.credential.id;
-  state.currentCredentialContext = result.credential;
-  state.credentialIdManuallyEdited = false;
-  byId('credential-form').reset();
-  byId('credential-template').value = 'github-readonly';
-  byId('credential-storage').value = 'local';
-  applyCredentialTemplate();
-  syncCredentialSourceFields();
-  renderCredentialPreview();
-  syncCredentialTestDefaults(true);
+    setCredentialModalFeedback('error', message);
+  }
 }
 
 async function handleCredentialTest(event) {
   event.preventDefault();
   const credentialId = byId('credential-test-id').value.trim();
   const targetUrl = byId('credential-test-url').value.trim();
-  const result = await withAction('Token check completed. Review the summary below, then connect your AI tool.', async function() {
-    return fetchJson('/v1/access/request', {
-      method: 'POST',
-      headers: {
-        'content-type': 'application/json'
-      },
-      body: JSON.stringify({
-        credentialId: credentialId,
-        operation: 'http.get',
-        targetUrl: targetUrl
-      })
-    });
-  });
   state.lastCredentialTestContext = {
     credentialId: credentialId,
     targetUrl: targetUrl
   };
-  state.lastCredentialTest = result;
-  renderCredentials();
+  try {
+    const result = await withAction('Token check completed. Review the summary below, then connect your AI tool.', async function() {
+      return fetchJson('/v1/access/request', {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json'
+        },
+        body: JSON.stringify({
+          credentialId: credentialId,
+          operation: 'http.get',
+          targetUrl: targetUrl
+        })
+      });
+    });
+    state.lastCredentialTest = result;
+    renderCredentials();
+  } catch (error) {
+    state.lastCredentialTest = null;
+    renderCredentialTestError(error instanceof Error ? error.message : String(error));
+  }
 }
 
 async function handleCredentialContextAction(event) {
@@ -2027,11 +2655,21 @@ async function handleCredentialContextAction(event) {
       setBusy(true);
       clearNotice();
       await openCredentialContext(credentialId);
-      setNotice('info', 'Loaded the current MCP-visible context. Secret storage remains separate.');
+      openEditCredentialModal(state.currentCredentialContext);
+      setNotice('info', 'Loaded the token for editing. Secret storage remains separate.');
       setBusy(false);
       return;
     }
 
+    if (action === 'test') {
+      state.selectedCredentialId = credentialId;
+      byId('credential-test-id').value = credentialId;
+      syncCredentialTestDefaults(true);
+      openSection('credentials-section');
+      setNotice('info', 'Selected token loaded into Test credential.');
+      return;
+    }
+
     if (action === 'rename') {
       const nextName = window.prompt('New display name', button.dataset.credentialContextName || '');
       if (!nextName || !nextName.trim()) {
@@ -2112,6 +2750,7 @@ async function handleCredentialContextAction(event) {
         state.lastCredentialTest = null;
         state.lastCredentialTestContext = null;
       }
+      closeDialog('credential-modal');
       renderCredentialContextManager();
       return;
     }
@@ -2459,24 +3098,40 @@ async function initialize() {
   if (localQuickstartButton) {
     localQuickstartButton.addEventListener('click', handleLocalQuickstartLogin);
   }
+  byId('open-credential-modal').addEventListener('click', openCreateCredentialModal);
   byId('credential-form').addEventListener('submit', handleCreateCredential);
   byId('credential-test-form').addEventListener('submit', handleCredentialTest);
-  byId('credential-context-form').addEventListener('submit', handleCredentialContextSave);
   byId('connect-form').addEventListener('submit', handleMcpConnectionCheck);
-  byId('credential-template').addEventListener('change', applyCredentialTemplate);
   byId('credential-name').addEventListener('input', function() {
     syncCredentialIdFromName(false);
   });
+  byId('credential-service').addEventListener('input', function() {
+    syncCredentialIdFromName(false);
+  });
   byId('credential-id').addEventListener('input', function() {
     state.credentialIdManuallyEdited = true;
     renderCredentialPreview();
   });
   byId('credential-storage').addEventListener('change', syncCredentialSourceFields);
-  byId('credential-form').addEventListener('input', renderCredentialPreview);
+  byId('credential-form').addEventListener('input', function(event) {
+    if (event.target instanceof HTMLElement && event.target.id) {
+      const container = event.target.closest('.field, .field-wide');
+      const errorNode = byId(event.target.id + '-error');
+      container?.classList.remove('has-error');
+      if (errorNode) {
+        errorNode.textContent = '';
+        errorNode.classList.remove('is-visible');
+      }
+    }
+    renderCredentialPreview();
+  });
   byId('credential-form').addEventListener('change', renderCredentialPreview);
   byId('credential-test-id').addEventListener('change', function() {
     syncCredentialTestDefaults(true);
   });
+  byId('connect-tabs').addEventListener('click', handleConnectTabClick);
+  byId('connect-section').addEventListener('click', handleCopyAction);
+  byId('connect-section').addEventListener('click', handleApplyToolSetup);
   byId('tenant-form').addEventListener('submit', handleCreateTenant);
   byId('auth-client-form').addEventListener('submit', handleCreateClient);
   byId('refresh-dashboard').addEventListener('click', refreshDashboard);
@@ -2493,17 +3148,6 @@ async function initialize() {
   byId('backup-inspect').addEventListener('click', handleBackupInspect);
   byId('backup-restore').addEventListener('click', handleBackupRestore);
   byId('backup-download').addEventListener('click', downloadBackup);
-  byId('credential-context-form').addEventListener('input', function() {
-    if (!state.selectedCredentialId) {
-      return;
-    }
-    renderContextPreview(
-      'credential-context-preview',
-      'credential-context-preview-warnings',
-      serializeCredentialContextForm(),
-      state.selectedCredentialId,
-    );
-  });
   byId('advanced-toggle').addEventListener('click', function() {
     state.advancedVisible = !state.advancedVisible;
     persistSession();
@@ -2516,6 +3160,17 @@ async function initialize() {
     if (!(event.target instanceof Element)) {
       return;
     }
+    const toastClose = event.target.closest('[data-toast-close]');
+    if (toastClose) {
+      const toastId = toastClose.getAttribute('data-toast-close');
+      document.querySelector('[data-toast-id="' + toastId + '"]')?.remove();
+      return;
+    }
+    const closeButton = event.target.closest('[data-dialog-close]');
+    if (closeButton) {
+      closeDialog(closeButton.getAttribute('data-dialog-close'));
+      return;
+    }
     const button = event.target.closest('[data-nav-target]');
     if (!button) {
       return;
@@ -2541,7 +3196,7 @@ async function initialize() {
   } else {
     renderAll();
     populateLoginDefaults(false);
-    applyCredentialTemplate();
+    applyCredentialDefaults();
     syncCredentialSourceFields();
     renderCredentialPreview();
     if (state.localQuickstartEnabled) {
@@ -2554,7 +3209,7 @@ async function initialize() {
 window.addEventListener('DOMContentLoaded', initialize);
 `;
 export function renderAdminPage(app) {
-    const stdioEntryPath = path.resolve(process.cwd(), "dist/index.js");
+    const stdioEntryPath = resolveLocalStdioEntryPath();
     const config = {
         version: app.config.version,
         baseUrl: app.config.publicBaseUrl,
@@ -2603,7 +3258,7 @@ export function renderAdminPage(app) {
           <div>
             <span class="eyebrow">Core Mode</span>
             <h1>Save a token. Teach the AI when to use it. Keep the secret hidden.</h1>
-            <p class="hero-copy">KeyLore is now centered on one beginner-friendly workflow: save a token, describe it in plain language, test it safely, and connect Codex or Gemini without putting the raw secret into model-visible context.</p>
+            <p class="hero-copy">KeyLore is now centered on one beginner-friendly workflow: save a token, describe it in plain language, test it safely, and connect Codex, Gemini, or Claude without putting the raw secret into model-visible context.</p>
           </div>
           <div class="hero-meta">
             <div class="meta-card">
@@ -2618,6 +3273,7 @@ export function renderAdminPage(app) {
         </section>
 
         <div id="notice" class="notice"></div>
+        <div id="toast-console" class="toast-console" aria-live="polite" aria-atomic="false"></div>
 
         <section id="login-panel" class="panel" style="margin-top: 24px;">
           <div class="section-heading">
@@ -2667,179 +3323,220 @@ export function renderAdminPage(app) {
         </section>
 
         <div id="dashboard" class="dashboard" hidden>
-          <section id="session-section" class="panel">
+          <div class="utility-shell" aria-hidden="true">
+            <button class="button-secondary" id="refresh-dashboard" type="button" data-busy-label="Refreshing..." data-idle-label="Refresh everything">Refresh everything</button>
+            <button class="button-danger" id="logout" type="button">Clear session</button>
+            <span id="session-status" class="state-warning">Not connected</span>
+            <span id="session-client-id">anonymous token</span>
+            <span id="session-tenant">global operator</span>
+            <span id="session-scopes">not loaded</span>
+          </div>
+          <section id="quick-start-section" class="panel">
             <div class="section-heading">
               <div>
-                <h2>You&apos;re connected</h2>
-                <p>The only things you need next are save token, test token, and connect your AI tool.</p>
+                <h2>Quick start</h2>
+                <p>The shortest path is add token, test token, then connect your AI tool.</p>
               </div>
-              <div class="toolbar">
-                <button class="button-secondary" id="refresh-dashboard" type="button" data-busy-label="Refreshing..." data-idle-label="Refresh everything">Refresh everything</button>
-                <button class="button-danger" id="logout" type="button">Clear session</button>
-              </div>
-            </div>
-            <div class="session-line">
-              <span id="session-status" class="state-warning">Not connected</span>
-              <span class="pill"><strong>Current path</strong> Core onboarding</span>
             </div>
-            <details class="disclosure">
-              <summary>Session details</summary>
-              <div class="list-meta">
-                <span class="pill"><strong>Client</strong> <span id="session-client-id">anonymous token</span></span>
-                <span class="pill"><strong>Tenant</strong> <span id="session-tenant">global operator</span></span>
-                <span class="pill"><strong>Scopes</strong> <span id="session-scopes">not loaded</span></span>
-              </div>
-            </details>
-            <div id="core-journey" style="margin-top: 18px;"></div>
-            <div id="advanced-summary" class="advanced-summary"></div>
+            <div id="core-journey"></div>
+            <div id="advanced-summary" class="advanced-summary" style="margin-top:18px;"></div>
           </section>
 
           <section id="credentials-section" class="panel">
             <div class="section-heading">
               <div>
-                <h2>Save a token</h2>
-                <p>Start with the basics. Paste the token, say when the AI should use it, and let KeyLore keep the raw secret out of the catalogue.</p>
+                <h2>Your tokens</h2>
+                <p>All saved tokens live here. Add one, edit it in a popup, test it, or remove it.</p>
               </div>
             </div>
-            <div class="panel-grid">
-              <div class="span-7 panel">
+            <div class="panel">
+              <div class="token-toolbar">
+                <div>
+                  <h2 style="font-size:1.4rem;">Saved tokens</h2>
+                  <p>All tokens are listed together here, including examples. Edit or delete any row directly.</p>
+                </div>
+                <button class="button" id="open-credential-modal" type="button">Add token</button>
+              </div>
+              <div id="credential-list"></div>
+            </div>
+            <div class="panel" style="margin-top:18px;">
+              <div class="section-heading">
+                <div>
+                  <h2 style="font-size:1.4rem;">Test credential</h2>
+                  <p>Run a real safe check. KeyLore will make an <code>http.get</code> call with the selected token and URL, without exposing the raw secret.</p>
+                </div>
+              </div>
+              <form id="credential-test-form" class="form-grid">
+                <div class="field"><label for="credential-test-id">Token to check</label><select id="credential-test-id"></select></div>
+                <div class="field-wide"><label for="credential-test-url">URL to call with this token</label><input id="credential-test-url" type="url" placeholder="https://api.github.com/rate_limit" required /></div>
+                <div class="panel-footnote field-wide" style="margin-top:-4px;">Success means the token, the target domain, and KeyLore policy all allowed the request.</div>
+                <div class="form-actions field-wide"><button class="button-secondary" type="submit" data-busy-label="Testing credential..." data-idle-label="Check this token">Check this token</button></div>
+              </form>
+              <div id="credential-test-result" style="margin-top: 18px;"></div>
+            </div>
+          </section>
+
+          <dialog id="credential-modal" class="modal">
+            <div class="modal-card">
+              <div class="modal-header">
+                <div>
+                  <h2 id="credential-modal-title" style="margin:0;">Add token</h2>
+                  <p id="credential-modal-copy" class="panel-footnote" style="margin-top:8px;">Paste the token, add the human and AI context, and save it into KeyLore.</p>
+                </div>
+                <button class="button-secondary" type="button" data-dialog-close="credential-modal">Close</button>
+              </div>
+              <div class="modal-body">
+                <div id="credential-modal-feedback" class="modal-feedback" aria-live="assertive"></div>
                 <form id="credential-form" class="form-grid">
-                  <div class="field-wide"><label for="credential-template">What is this token for?</label><select id="credential-template"><option value="github-readonly">GitHub read-only</option><option value="github-write">GitHub write-capable</option><option value="npm-readonly">npm read-only</option><option value="internal-service">Internal service token</option><option value="generic-bearer">Generic bearer API</option></select></div>
-                  <div class="field"><label for="credential-name">Name shown in KeyLore</label><input id="credential-name" type="text" required /></div>
-                  <div class="field"><label for="credential-id">Token key</label><input id="credential-id" type="text" required placeholder="github-read-only-token-local" /></div>
+                  <div class="field"><label class="field-label" for="credential-name">Name shown in KeyLore <span class="info-glyph" tabindex="0" data-tooltip="The human-friendly name you will recognize later in the saved token list. Keep it short and specific.">i</span></label><input id="credential-name" type="text" required /><div id="credential-name-error" class="field-error" aria-live="polite"></div></div>
+                  <div class="field"><label class="field-label" for="credential-id">Token key <span class="info-glyph" tabindex="0" data-tooltip="The unique internal key for this token. KeyLore uses it when testing, selecting, and connecting the token. Change this if KeyLore says the key already exists.">i</span></label><input id="credential-id" type="text" required placeholder="github-read-only-token-local" /><div id="credential-id-error" class="field-error" aria-live="polite"></div></div>
                   <div class="field-wide panel-footnote" style="margin-top:-4px;">This is the unique key for the token. It appears in the saved-token list and is what you change if KeyLore says a token key already exists.</div>
-                  <div class="field"><label for="credential-domains">Where can it be used?</label><textarea id="credential-domains" placeholder="api.github.com"></textarea></div>
-                  <div id="credential-secret-field" class="field-wide"><label for="credential-secret">Paste token</label><textarea id="credential-secret" placeholder="Paste the raw token here. KeyLore stores it outside the searchable metadata catalogue."></textarea></div>
-                  <div class="field-wide"><label for="credential-notes">Tell the AI when to use this token</label><textarea id="credential-notes" placeholder="Example: Use this for GitHub repository metadata, issues, and pull requests. Do not use it for write actions."></textarea></div>
+                  <div class="field"><label class="field-label" for="credential-storage">Where to store the token <span class="info-glyph" tabindex="0" data-tooltip="Local encrypted store is the simple default. Environment reference is only for advanced setups where another process already manages the secret.">i</span></label><select id="credential-storage"><option value="local">Local encrypted store</option><option value="env">Environment reference</option></select></div>
+                  <div class="field"><label class="field-label" for="credential-service">Service name <span class="info-glyph" tabindex="0" data-tooltip="The service this token belongs to, such as github, npm, stripe, or internal_api. This helps the AI identify the right token.">i</span></label><input id="credential-service" type="text" required placeholder="github" /><div id="credential-service-error" class="field-error" aria-live="polite"></div></div>
+                  <div class="field"><label class="field-label" for="credential-sensitivity">Risk level <span class="info-glyph" tabindex="0" data-tooltip="How damaging misuse would be. Use higher levels for broad access or write-capable tokens.">i</span></label><select id="credential-sensitivity"><option value="moderate">moderate</option><option value="high">high</option><option value="critical">critical</option></select></div>
+                  <div class="field"><label class="field-label" for="credential-operations">Allow writes? <span class="info-glyph" tabindex="0" data-tooltip="Choose whether this token should be treated as read-only or allowed to make controlled write requests.">i</span></label><select id="credential-operations"><option value="http.get">No, read only</option><option value="http.get,http.post">Yes, allow controlled writes</option></select></div>
+                  <div class="field"><label class="field-label" for="credential-tags">Tags <span class="info-glyph" tabindex="0" data-tooltip="Optional short labels like github, readonly, billing, or internal. These help search and later organization.">i</span></label><input id="credential-tags" type="text" placeholder="github,readonly" /></div>
+                  <div class="field"><label class="field-label" for="credential-domains">Where can it be used? <span class="info-glyph" tabindex="0" data-tooltip="List the domains this token is allowed to reach, such as api.github.com. This keeps the token scoped and helps the AI choose correctly.">i</span></label><textarea id="credential-domains" placeholder="api.github.com"></textarea><div id="credential-domains-error" class="field-error" aria-live="polite"></div></div>
+                  <div id="credential-secret-field" class="field-wide"><label id="credential-secret-label" class="field-label" for="credential-secret">Paste token <span class="info-glyph" tabindex="0" data-tooltip="Paste the raw token value here. KeyLore stores it separately from the searchable metadata so the AI does not see the secret itself.">i</span></label><textarea id="credential-secret" placeholder="Paste the raw token here. KeyLore stores it outside the searchable metadata catalogue."></textarea><div id="credential-secret-error" class="field-error" aria-live="polite"></div></div>
+                  <div id="credential-env-ref-field" class="field-wide" hidden><label class="field-label" for="credential-env-ref">Environment variable name <span class="info-glyph" tabindex="0" data-tooltip="Advanced mode only. Enter the environment variable that already contains the token, for example KEYLORE_SECRET_GITHUB_READONLY.">i</span></label><input id="credential-env-ref" type="text" placeholder="KEYLORE_SECRET_GITHUB_READONLY" /></div>
+                  <div class="field-wide"><label class="field-label" for="credential-user-context">Explain this token for people <span class="info-glyph" tabindex="0" data-tooltip="Human context: why this token exists, who it is for, and any caveats. Example: Primary read-only GitHub token for routine repository metadata lookups.">i</span></label><textarea id="credential-user-context" placeholder="Example: Primary read-only GitHub token for routine repository metadata lookups."></textarea><div id="credential-user-context-error" class="field-error" aria-live="polite"></div></div>
+                  <div class="field-wide"><label class="field-label" for="credential-llm-context">Tell the AI when to use this token <span class="info-glyph" tabindex="0" data-tooltip="AI context: be explicit about when to use this token and what to avoid. Good example: Use for GitHub repository metadata, issues, and pull requests. Never use it for write actions.">i</span></label><textarea id="credential-llm-context" placeholder="Example: Use this for GitHub repository metadata, issues, and pull requests. Do not use it for write actions."></textarea><div id="credential-llm-context-error" class="field-error" aria-live="polite"></div></div>
                   <div class="field-wide">
-                    <label for="credential-guidance">Writing help</label>
-                    <div id="credential-guidance"></div>
-                  </div>
-                  <div class="field-wide">
-                    <label for="credential-mcp-preview">What the AI will see</label>
+                    <label class="field-label" for="credential-mcp-preview">What the AI will see <span class="info-glyph" tabindex="0" data-tooltip="This preview shows the metadata the AI can see. It never includes the raw secret value or the underlying secret binding details.">i</span></label>
                     <div id="credential-preview-warnings" style="margin-bottom: 12px;"></div>
-                    <div id="credential-mcp-preview"></div>
+                    <details class="disclosure">
+                      <summary>Show the AI-visible record</summary>
+                      <div id="credential-mcp-preview" style="margin-top: 12px;"></div>
+                    </details>
                   </div>
-                  <details class="disclosure field-wide">
-                    <summary>Advanced token settings</summary>
-                    <div class="form-grid">
-                      <div class="field"><label for="credential-storage">Where to store the token</label><select id="credential-storage"><option value="local">Local encrypted store</option><option value="env">Environment reference</option></select></div>
-                      <div class="field"><label for="credential-service">Service name</label><input id="credential-service" type="text" required /></div>
-                      <div class="field"><label for="credential-sensitivity">Risk level</label><select id="credential-sensitivity"><option value="moderate">moderate</option><option value="high">high</option><option value="critical">critical</option></select></div>
-                      <div class="field"><label for="credential-operations">Allow writes?</label><select id="credential-operations"><option value="http.get">No, read only</option><option value="http.get,http.post">Yes, allow controlled writes</option></select></div>
-                      <div class="field"><label for="credential-tags">Tags</label><input id="credential-tags" type="text" placeholder="github,readonly" /></div>
-                      <div id="credential-env-ref-field" class="field-wide" hidden><label for="credential-env-ref">Environment variable name</label><input id="credential-env-ref" type="text" placeholder="KEYLORE_SECRET_GITHUB_READONLY" /></div>
-                    </div>
-                  </details>
-                  <div class="form-actions field-wide"><button class="button" type="submit" data-busy-label="Saving token..." data-idle-label="Save token">Save token</button></div>
+                  <div class="form-actions field-wide"><button class="button" id="credential-submit" type="submit" data-busy-label="Saving token..." data-idle-label="Save token">Save token</button></div>
                 </form>
               </div>
-              <div class="span-5 code-stack">
-                <div class="panel">
-                  <div class="section-heading">
-                    <div>
-                      <h2 style="font-size:1.4rem;">Saved tokens</h2>
-                      <p>Use these after you save something. The main next step is usually Test credential.</p>
-                    </div>
-                  </div>
-                  <div id="credential-list"></div>
-                </div>
-                <div class="panel">
-                  <div class="section-heading">
-                    <div>
-                      <h2 style="font-size:1.4rem;">Test credential</h2>
-                      <p>Run a real safe check. KeyLore will make an <code>http.get</code> call with the selected token and URL, without exposing the raw secret.</p>
-                    </div>
-                  </div>
-                  <form id="credential-test-form" class="form-grid">
-                    <div class="field"><label for="credential-test-id">Token to check</label><select id="credential-test-id"></select></div>
-                    <div class="field-wide"><label for="credential-test-url">URL to call with this token</label><input id="credential-test-url" type="url" placeholder="https://api.github.com/rate_limit" required /></div>
-                    <div class="panel-footnote field-wide" style="margin-top:-4px;">Success means the token, the target domain, and KeyLore policy all allowed the request.</div>
-                    <div class="form-actions field-wide"><button class="button-secondary" type="submit" data-busy-label="Testing credential..." data-idle-label="Check this token">Check this token</button></div>
-                  </form>
-                  <div id="credential-test-result" style="margin-top: 18px;"></div>
-                </div>
-                <details class="panel disclosure">
-                  <summary>Inspect or edit AI-facing context</summary>
-                  <div class="panel-footnote">This is metadata only. Secret storage and raw token values stay separate and are not shown here.</div>
-                  <div class="panel-grid" style="margin-top: 16px;">
-                    <div class="span-6 panel">
-                      <div class="section-heading"><div><h2 style="font-size:1.2rem;">Current AI-visible record</h2></div></div>
-                      <div id="credential-context-current"></div>
-                    </div>
-                    <div class="span-6 panel">
-                      <div class="section-heading"><div><h2 style="font-size:1.2rem;">Context editor</h2></div></div>
-                      <form id="credential-context-form" class="form-grid" hidden>
-                        <div class="field"><label for="credential-context-id">Credential ID</label><input id="credential-context-id" type="text" readonly /></div>
-                        <div class="field"><label for="credential-context-display-name">Display Name</label><input id="credential-context-display-name" type="text" required /></div>
-                        <div class="field"><label for="credential-context-service">Service</label><input id="credential-context-service" type="text" required /></div>
-                        <div class="field"><label for="credential-context-sensitivity">Risk level</label><select id="credential-context-sensitivity"><option value="moderate">moderate</option><option value="high">high</option><option value="critical">critical</option></select></div>
-                        <div class="field"><label for="credential-context-status">Lifecycle</label><select id="credential-context-status"><option value="active">active</option><option value="disabled">disabled</option></select></div>
-                        <div class="field"><label for="credential-context-operations">Allow writes?</label><select id="credential-context-operations"><option value="http.get">No, read only</option><option value="http.get,http.post">Yes, allow controlled writes</option></select></div>
-                        <div class="field-wide"><label for="credential-context-domains">Where can it be used?</label><textarea id="credential-context-domains"></textarea></div>
-                        <div class="field-wide"><label for="credential-context-notes">Tell the AI when to use this token</label><textarea id="credential-context-notes"></textarea></div>
-                        <div class="field-wide"><label for="credential-context-tags">Tags</label><input id="credential-context-tags" type="text" /></div>
-                        <div class="field-wide">
-                          <label for="credential-context-preview">Updated AI-visible preview</label>
-                          <div id="credential-context-preview-warnings" style="margin-bottom: 12px;"></div>
-                          <div id="credential-context-preview"></div>
-                        </div>
-                        <div class="form-actions field-wide"><button class="button-secondary" type="submit" data-busy-label="Saving context..." data-idle-label="Save context changes">Save context changes</button></div>
-                      </form>
-                    </div>
-                  </div>
-                </details>
-              </div>
             </div>
-          </section>
+          </dialog>
 
           <section id="connect-section" class="panel">
             <div class="section-heading">
               <div>
                 <h2>Connect your AI tool</h2>
-                <p>For most local users, copy the local snippet below, restart the AI tool, and try the suggested first prompt.</p>
+                <p>Follow the tool-specific steps below. Each one tells you where to put the config, what to restart, and what to try first.</p>
               </div>
             </div>
+            <div id="connect-tabs" class="tab-row" role="tablist" aria-label="AI tool setup tabs">
+              <button class="tab-button" type="button" data-connect-tab="codex" role="tab" aria-selected="true">Codex</button>
+              <button class="tab-button" type="button" data-connect-tab="gemini" role="tab" aria-selected="false">Gemini CLI</button>
+              <button class="tab-button" type="button" data-connect-tab="claude" role="tab" aria-selected="false">Claude CLI</button>
+            </div>
             <div class="panel-grid">
-              <div class="span-6 code-stack">
+              <div class="span-12 code-stack" data-connect-panel="codex">
+                <div class="panel">
+                  <div class="section-heading"><div><h2 style="font-size:1.4rem;">Codex</h2><p>Recommended for local use.</p></div></div>
+                  <ol class="panel-footnote">
+                    <li>Open or create <span class="mono">~/.codex/config.toml</span>.</li>
+                    <li>Paste the snippet below into that file under the top-level <span class="mono">mcp_servers</span> section.</li>
+                    <li>Save the file, then restart Codex.</li>
+                    <li>Use the first prompt after restart, or run <span class="mono">/mcp</span> inside Codex to confirm KeyLore is available.</li>
+                  </ol>
+                  <div class="snippet-stack">
+                    <div class="snippet-box">
+                      <button class="copy-glyph" type="button" data-copy-target="codex-stdio-snippet" data-copy-label="Codex setup snippet" aria-label="Copy Codex setup snippet">⧉</button>
+                      <textarea id="codex-stdio-snippet" style="width:100%; min-height: 130px;"></textarea>
+                    </div>
+                  </div>
+                  <div class="panel-actions" style="margin-top:16px;">
+                    <button class="button-secondary" type="button" data-apply-tool="codex">Apply to my Codex settings</button>
+                  </div>
+                </div>
+              </div>
+              <div class="span-12 code-stack" data-connect-panel="gemini" hidden>
                 <div class="panel">
-                  <div class="section-heading"><div><h2 style="font-size:1.4rem;">Codex local setup</h2><p>Recommended for local use.</p></div></div>
-                  <textarea id="codex-stdio-snippet" style="width:100%; min-height: 130px;"></textarea>
-                  <div class="panel-footnote">Local stdio uses the KeyLore process on this machine and avoids extra token setup.</div>
-                  <div class="section-heading" style="margin-top: 16px;"><div><h2 style="font-size:1.2rem;">First prompt to try in Codex</h2></div></div>
-                  <textarea id="codex-first-prompt" style="width:100%; min-height: 130px;"></textarea>
+                  <div class="section-heading"><div><h2 style="font-size:1.4rem;">Gemini CLI</h2><p>Recommended for local use.</p></div></div>
+                  <ol class="panel-footnote">
+                    <li>Open <span class="mono">~/.gemini/settings.json</span>.</li>
+                    <li>Merge the snippet below into the <span class="mono">mcpServers</span> object. If the file is empty, paste the whole snippet.</li>
+                    <li>Save the file, then restart Gemini CLI.</li>
+                    <li>Run <span class="mono">gemini mcp list</span> if you want to confirm KeyLore is connected, then use the first prompt below.</li>
+                  </ol>
+                  <div class="snippet-stack">
+                    <div class="snippet-box">
+                      <button class="copy-glyph" type="button" data-copy-target="gemini-stdio-snippet" data-copy-label="Gemini setup snippet" aria-label="Copy Gemini setup snippet">⧉</button>
+                      <textarea id="gemini-stdio-snippet" style="width:100%; min-height: 170px;"></textarea>
+                    </div>
+                  </div>
+                  <div class="panel-actions" style="margin-top:16px;">
+                    <button class="button-secondary" type="button" data-apply-tool="gemini">Apply to my Gemini settings</button>
+                  </div>
                 </div>
+              </div>
+              <div class="span-12 code-stack" data-connect-panel="claude" hidden>
                 <div class="panel">
-                  <div class="section-heading"><div><h2 style="font-size:1.4rem;">Gemini local setup</h2><p>Recommended for local use.</p></div></div>
-                  <textarea id="gemini-stdio-snippet" style="width:100%; min-height: 170px;"></textarea>
-                  <div class="section-heading" style="margin-top: 16px;"><div><h2 style="font-size:1.2rem;">First prompt to try in Gemini</h2></div></div>
-                  <textarea id="gemini-first-prompt" style="width:100%; min-height: 130px;"></textarea>
+                  <div class="section-heading"><div><h2 style="font-size:1.4rem;">Claude CLI</h2><p>Recommended for local use.</p></div></div>
+                  <ol class="panel-footnote">
+                    <li>Run the command below in your shell. It adds KeyLore to Claude's MCP config for you.</li>
+                    <li>Confirm the server appears with <span class="mono">claude mcp list</span>.</li>
+                    <li>Start or restart Claude CLI.</li>
+                    <li>Use the first prompt after restart.</li>
+                  </ol>
+                  <div class="snippet-stack">
+                    <div class="snippet-box">
+                      <button class="copy-glyph" type="button" data-copy-target="claude-stdio-snippet" data-copy-label="Claude setup command" aria-label="Copy Claude setup command">⧉</button>
+                      <textarea id="claude-stdio-snippet" style="width:100%; min-height: 160px;"></textarea>
+                    </div>
+                  </div>
+                  <div class="panel-actions" style="margin-top:16px;">
+                    <button class="button-secondary" type="button" data-apply-tool="claude">Apply to my Claude settings</button>
+                  </div>
                 </div>
               </div>
-              <div class="span-6 panel">
-                <div class="section-heading"><div><h2 style="font-size:1.4rem;">Local connection check</h2></div></div>
-                <div id="connect-stdio-status"></div>
-                <div class="panel-footnote">If the local entry point is present, copy one of the local setup snippets above and restart your AI tool.</div>
+              <div class="span-12 panel">
+                <div class="section-heading">
+                  <div>
+                    <h2 style="font-size:1.4rem;">First prompt to try</h2>
+                    <p>Use the same prompt after connecting any supported tool.</p>
+                  </div>
+                </div>
+                <div class="snippet-box">
+                  <button class="copy-glyph" type="button" data-copy-target="shared-first-prompt" data-copy-label="Shared first prompt" aria-label="Copy shared first prompt">⧉</button>
+                  <textarea id="shared-first-prompt" style="width:100%; min-height: 130px;"></textarea>
+                </div>
               </div>
               <div class="span-12">
                 <details class="panel disclosure">
                   <summary>Remote or advanced connection options</summary>
                   <div class="panel-grid" style="margin-top: 16px;">
-                    <div class="span-6 code-stack">
+                    <div class="span-4 code-stack">
                       <div class="panel">
                         <div class="section-heading"><div><h2 style="font-size:1.4rem;">Codex HTTP</h2></div></div>
-                        <textarea id="codex-http-snippet" style="width:100%; min-height: 110px;"></textarea>
+                        <div class="snippet-box">
+                          <button class="copy-glyph" type="button" data-copy-target="codex-http-snippet" data-copy-label="Codex HTTP snippet" aria-label="Copy Codex HTTP snippet">⧉</button>
+                          <textarea id="codex-http-snippet" style="width:100%; min-height: 110px;"></textarea>
+                        </div>
                       </div>
                       <div class="panel">
                         <div class="section-heading"><div><h2 style="font-size:1.4rem;">Gemini HTTP</h2></div></div>
-                        <textarea id="gemini-http-snippet" style="width:100%; min-height: 190px;"></textarea>
+                        <div class="snippet-box">
+                          <button class="copy-glyph" type="button" data-copy-target="gemini-http-snippet" data-copy-label="Gemini HTTP snippet" aria-label="Copy Gemini HTTP snippet">⧉</button>
+                          <textarea id="gemini-http-snippet" style="width:100%; min-height: 190px;"></textarea>
+                        </div>
                       </div>
+                      <div class="panel">
+                        <div class="section-heading"><div><h2 style="font-size:1.4rem;">Claude HTTP</h2></div></div>
+                        <div class="snippet-box">
+                          <button class="copy-glyph" type="button" data-copy-target="claude-http-snippet" data-copy-label="Claude HTTP snippet" aria-label="Copy Claude HTTP snippet">⧉</button>
+                          <textarea id="claude-http-snippet" style="width:100%; min-height: 170px;"></textarea>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="span-4 code-stack">
                       <div class="panel">
                         <div class="section-heading"><div><h2 style="font-size:1.4rem;">Generic HTTP</h2></div></div>
-                        <textarea id="generic-http-snippet" style="width:100%; min-height: 90px;"></textarea>
+                        <div class="snippet-box">
+                          <button class="copy-glyph" type="button" data-copy-target="generic-http-snippet" data-copy-label="Generic HTTP snippet" aria-label="Copy generic HTTP snippet">⧉</button>
+                          <textarea id="generic-http-snippet" style="width:100%; min-height: 90px;"></textarea>
+                        </div>
                       </div>
                     </div>
-                    <div class="span-6 panel">
+                    <div class="span-4 panel">
                       <div class="section-heading">
                         <div>
                           <h2 style="font-size:1.4rem;">HTTP MCP token and check</h2>
@@ -2849,7 +3546,7 @@ export function renderAdminPage(app) {
                       <form id="connect-form" class="form-grid">
                         <div class="field"><label for="connect-client-id">Client ID</label><input id="connect-client-id" type="text" placeholder="keylore-admin-local" /></div>
                         <div class="field"><label for="connect-client-secret">Client Secret</label><input id="connect-client-secret" type="password" placeholder="operator secret" /></div>
-                        <div class="field-wide"><label for="mcp-token-export">Export command</label><textarea id="mcp-token-export" style="width:100%; min-height: 90px;"></textarea></div>
+                        <div class="field-wide"><label for="mcp-token-export">Export command</label><div class="snippet-box"><button class="copy-glyph" type="button" data-copy-target="mcp-token-export" data-copy-label="MCP export command" aria-label="Copy MCP export command">⧉</button><textarea id="mcp-token-export" style="width:100%; min-height: 90px;"></textarea></div></div>
                         <div class="form-actions field-wide"><button class="button-secondary" type="submit" data-busy-label="Checking MCP..." data-idle-label="Mint token and verify HTTP MCP">Mint token and verify HTTP MCP</button></div>
                       </form>
                       <div id="connect-result" style="margin-top: 18px;"></div>