kryptheon 0.1.22 → 0.1.23

package/bin/kryptheon.js

@@ -2053,6 +2053,8 @@ function codeRead() {
       console.log('  ' + f.severity + '   ' + f.file + ':' + f.line + '   (verification required)');
       console.log('    ' + f.headline);
       console.log('    ' + f.sink + ':  ' + f.expression);
+      const parts = (f.parts || []).filter((p) => p.text !== f.expression);
+      if (parts.length) console.log('    the risky part' + (parts.length === 1 ? ':  ' : 's:  ') + parts.map((p) => p.text).join(',  '));
     }
     const prompted = high.slice(0, CODE_PROMPTS_SHOWN);
     if (prompted.length) {

package/kryptheon-code.js

@@ -149,10 +149,10 @@ function classify(node, scope, code, depth, aliases) {
     case 'NullLiteral':
       return 'safe';
     case 'TemplateLiteral':
-      return worst(node.expressions.map((e) => again(e)));
+      return worst(judgedParts(node, scope, code).map((e) => again(e)));
     case 'BinaryExpression':
       if (node.operator !== '+') return 'safe'; // - * / % comparisons: never text
-      return worst([again(node.left), again(node.right)]);
+      return worst(judgedParts(node, scope, code).map((e) => again(e)));
     case 'UnaryExpression':
     case 'UpdateExpression':
       return 'safe';
@@ -168,16 +168,16 @@ function classify(node, scope, code, depth, aliases) {
       if (NUMERIC_CALLS.test(name)) return 'safe';
       if (node.callee.type === 'MemberExpression' && node.callee.object && node.callee.object.name === 'Math') return 'safe';
       // items.map(i => `<li>${i.name}</li>`).join('') - judge what map builds.
-      if (name === 'join' && node.callee.object && /CallExpression$/.test(node.callee.object.type) &&
-          calleeName(node.callee.object.callee) === 'map') {
-        const fn = node.callee.object.arguments[0];
-        // The callback's item is whatever the array it walks holds.
-        const listOrigin = again(node.callee.object.callee.object);
-        const item = fn && fn.params && fn.params[0] && fn.params[0].type === 'Identifier' ? fn.params[0].name : null;
-        const inner = Object.assign({}, aliases || {});
-        if (item) inner[item] = listOrigin;
-        return classify(returnedBy(fn), scope, code, depth + 1, inner);
+      const mapped = mapCallback(node, scope, code, depth, aliases);
+      if (mapped) {
+        return mapped.returns.length
+          ? worst(mapped.returns.map((r) => classify(r.node, r.scope, code, depth + 1, mapped.inner)))
+          : 'unknown';
       }
+      // An escaping helper of this file's own, known by what it does. Inside a
+      // template, one that leaves quotes alone does not protect a value that
+      // lands in an attribute - the template judges that case itself.
+      if (escaperOf(node, scope, code)) return 'safe';
       // A function of this file's own: as dangerous as what it returns. One
       // that only ever returns constants - a lookup of labels, icons and
       // colours - cannot carry anything in; one that returns a parameter
@@ -264,6 +264,154 @@ function returnsOf(fnPath) {
   return found;
 }
 
+// Every function in the piece being read, by node, so a callback handed to
+// map() can be judged in its own scope - where its own `const color = ...`
+// lives - instead of the caller's, where that name means nothing.
+let FN_PATHS = new WeakMap();
+
+/**
+ * list.map(cb).join(''): the callback's returns, each with its own scope, and
+ * what the callback's names stand for - the item is whatever the list holds,
+ * the index is a number. Null when node is not that shape.
+ */
+function mapCallback(node, scope, code, depth, aliases) {
+  if (calleeName(node.callee) !== 'join' || !node.callee.object || !/CallExpression$/.test(node.callee.object.type) ||
+      calleeName(node.callee.object.callee) !== 'map') {
+    return null;
+  }
+  const mapCall = node.callee.object;
+  const fn = mapCall.arguments[0];
+  const listOrigin = classify(mapCall.callee.object, scope, code, depth + 1, aliases);
+  const inner = Object.assign({}, aliases || {});
+  const params = (fn && fn.params) || [];
+  if (params[0] && params[0].type === 'Identifier') inner[params[0].name] = listOrigin;
+  if (params[1] && params[1].type === 'Identifier') inner[params[1].name] = 'safe';
+  const fnPath = fn && FN_PATHS.get(fn);
+  const returns = fnPath
+    ? returnsOf(fnPath)
+    : (returnedBy(fn) ? [{ node: returnedBy(fn), scope: scope }] : []);
+  return { returns: returns, inner: inner };
+}
+
+/**
+ * Whether a call escapes HTML - by name for the well-known ones, and for a
+ * helper of this file's own, by what it does: every return is a replace()
+ * chain, its patterns cover & < and >, and it writes &amp; &lt; &gt;. The
+ * name decides nothing - `esc` and `clean3` count, and an "escape" that only
+ * handles "<", or escapes and then returns the original, does not.
+ * Returns { dq, sq }: whether " and ' are escaped too. Null when it does not escape.
+ */
+function escaperOf(call, scope, code) {
+  if (!call || !/CallExpression$/.test(call.type)) return null;
+  const name = calleeName(call.callee);
+  if (MAKES_SAFE.test(name)) return { dq: true, sq: true };
+  if (call.callee.type !== 'Identifier') return null;
+  const fnPath = localFunction(call.callee.name, scope);
+  if (!fnPath) return null;
+  const returns = returnsOf(fnPath);
+  if (!returns.length || !returns.every((r) => /CallExpression$/.test(r.node.type) &&
+      /^(replace|replaceAll)$/.test(calleeName(r.node.callee)))) {
+    return null;
+  }
+  let patterns = '';
+  const written = [];
+  fnPath.traverse({
+    RegExpLiteral(p) {
+      patterns += p.node.pattern;
+    },
+    StringLiteral(p) {
+      written.push(p.node.value);
+      const parent = p.parent;
+      if (parent && /CallExpression$/.test(parent.type) && parent.arguments[0] === p.node &&
+          /^(replace|replaceAll)$/.test(calleeName(parent.callee))) {
+        patterns += p.node.value;
+      }
+    },
+  });
+  const writes = (entity) => written.some((s) => s.indexOf(entity) !== -1);
+  if (!/&/.test(patterns) || !/</.test(patterns) || !/>/.test(patterns)) return null;
+  if (!writes('&amp;') || !writes('&lt;') || !writes('&gt;')) return null;
+  return {
+    dq: /"/.test(patterns) && (writes('&quot;') || writes('&#34;') || writes('&#x22;')),
+    sq: /'/.test(patterns) && (writes('&#39;') || writes('&#x27;') || writes('&apos;')),
+  };
+}
+
+/**
+ * The quote an HTML attribute value is open in at the end of this text: '"',
+ * "'", 'bare' for an unquoted one, '' when the text is not inside a tag at all.
+ * Only inside a tag - after a "<" that no ">" has closed - is an "=" an
+ * attribute; the "=" of "/go?next=" in a URL string is not one.
+ */
+function openAttribute(text) {
+  const lt = text.lastIndexOf('<');
+  if (lt === -1 || text.lastIndexOf('>') > lt) return '';
+  const tag = text.slice(lt);
+  const quoted = /=\s*(["'])[^"']*$/.exec(tag);
+  if (quoted) return quoted[1];
+  return /\s[^\s"'<>\/=]+\s*=\s*$/.test(tag) ? 'bare' : '';
+}
+
+/**
+ * The pieces of a template or a + concatenation to judge one by one. An
+ * escaped value is judged as its escaped input when the escaping is not
+ * enough for where it lands: inside a "..." attribute that needs " escaped,
+ * inside '...' that needs ' escaped, and an unquoted attribute is broken by a
+ * space no escaper touches.
+ */
+function judgedParts(node, scope, code) {
+  const pairs = [];
+  if (node.type === 'TemplateLiteral') {
+    // Everything written before this value, so an attribute opened in an
+    // earlier piece - `<a title="${a}" href="${b}"` - is still seen as open.
+    let before = '';
+    node.expressions.forEach((e, i) => {
+      before += node.quasis[i].value.raw;
+      pairs.push({ before: before, value: e });
+      before += 'x';
+    });
+  } else {
+    const text = (n) => (n.type === 'StringLiteral' ? n.value
+      : n.type === 'TemplateLiteral' ? n.quasis[n.quasis.length - 1].value.raw : '');
+    pairs.push({ before: '', value: node.left });
+    pairs.push({ before: text(node.left), value: node.right });
+  }
+  return pairs.map(({ before, value }) => {
+    const esc = escaperOf(value, scope, code);
+    if (!esc) return value;
+    const quote = openAttribute(before);
+    const enough = quote === '' || (quote === '"' && esc.dq) || (quote === "'" && esc.sq);
+    return enough ? { type: 'StringLiteral' } : (value.arguments[0] || value);
+  });
+}
+
+/**
+ * Which parts of a value make it unsafe, in the words of the code - so a fix
+ * prompt can say "only ${log.caller_number}" instead of quoting sixty lines of
+ * template and leaving the reader to find it. At most five, never repeated.
+ */
+function riskyParts(node, scope, code, aliases, out, depth) {
+  if (!node || out.length >= 5 || depth > MAX_DEPTH) return;
+  const origin = classify(node, scope, code, 0, aliases);
+  if (origin === 'safe') return;
+  const go = (n, s, a) => riskyParts(n, s || scope, code, a || aliases, out, depth + 1);
+  if (node.type === 'TemplateLiteral' || (node.type === 'BinaryExpression' && node.operator === '+')) {
+    judgedParts(node, scope, code).forEach((p) => go(p));
+    return;
+  }
+  if (node.type === 'ConditionalExpression') { go(node.consequent); go(node.alternate); return; }
+  if (node.type === 'LogicalExpression') { go(node.left); go(node.right); return; }
+  if (/CallExpression$/.test(node.type)) {
+    const mapped = mapCallback(node, scope, code, depth, aliases);
+    if (mapped && mapped.returns.length) {
+      mapped.returns.forEach((r) => go(r.node, r.scope, mapped.inner));
+      return;
+    }
+  }
+  const text = code.slice(node.start, node.end).replace(/\s+/g, ' ').slice(0, 80);
+  if (!out.some((p) => p.text === text)) out.push({ text: text, origin: origin });
+}
+
 function rootIdentifier(node) {
   let n = node;
   while (n && /MemberExpression$/.test(n.type)) n = n.object;
@@ -284,13 +432,50 @@ function fromBinding(id, scope, code, depth, aliases) {
   const binding = scope.getBinding(id.name);
   if (!binding) return 'unknown';
   if (binding.path && binding.path.type === 'CatchClause') return 'error';
+  if (binding.kind === 'param') return fromCalls(binding, code, depth);
   const init = binding.path && binding.path.node && binding.path.node.init;
   if (!init) return 'unknown';
   if (readsResponseBody(init)) return 'network';
   // Reassigned later: the first value says nothing reliable about the last.
   if (binding.constantViolations && binding.constantViolations.length) return 'unknown';
   // Destructured from a response body: const { name } = await res.json()
-  return classify(init, binding.path.scope, code, depth + 1);
+  // Aliases carry through: inside a map() callback, `const t = r.title` is as
+  // dangerous as the item r it was read from.
+  return classify(init, binding.path.scope, code, depth + 1, aliases);
+}
+
+/**
+ * A parameter is as dangerous as the worst thing any call passes it. Every
+ * use of the function has to be a call this file makes: one handed on as a
+ * value - a callback, an export, an event handler - is called from somewhere
+ * the code does not show, so its parameter stays unknown.
+ */
+function fromCalls(binding, code, depth) {
+  const fn = binding.path && binding.path.parentPath;
+  if (!fn || !/Function/.test(fn.node.type)) return 'unknown';
+  const index = fn.node.params.indexOf(binding.path.node);
+  if (index === -1) return 'unknown';
+  let name = fn.node.id && fn.node.id.name;
+  if (!name && fn.parentPath && fn.parentPath.node.type === 'VariableDeclarator' && fn.parentPath.node.id.type === 'Identifier') {
+    name = fn.parentPath.node.id.name;
+  }
+  const fnBinding = name && fn.parentPath && fn.parentPath.scope.getBinding(name);
+  if (!fnBinding || (fnBinding.constantViolations && fnBinding.constantViolations.length)) return 'unknown';
+  const refs = fnBinding.referencePaths || [];
+  if (!refs.length) return 'unknown';
+  const origins = [];
+  for (const ref of refs) {
+    const call = ref.parent;
+    if (!call || !/CallExpression$/.test(call.type) || call.callee !== ref.node) return 'unknown';
+    const arg = call.arguments[index];
+    if (!arg) {
+      origins.push('safe'); // not passed: undefined
+      continue;
+    }
+    if (call.arguments.slice(0, index + 1).some((a) => a.type === 'SpreadElement')) return 'unknown';
+    origins.push(classify(arg, ref.scope, code, depth + 1));
+  }
+  return worst(origins);
 }
 
 function readsResponseBody(node) {
@@ -342,6 +527,11 @@ function sinksIn(parser, code, file, lineOffset) {
   // each call actually hands it.
   const calls = new Map();
   const viaHelper = [];
+  const partsOf = (value, scope) => {
+    const out = [];
+    riskyParts(value, scope, code, undefined, out, 0);
+    return out;
+  };
   const add = (node, scope, sink, value) => {
     const param = paramOf(value, scope);
     if (param) {
@@ -350,9 +540,13 @@ function sinksIn(parser, code, file, lineOffset) {
     }
     const origin = classify(value, scope, code, 0);
     if (origin === 'safe') return;
-    found.push({ line: lineOf(node), sink: sink, expression: textOf(value), origin: origin });
+    found.push({ line: lineOf(node), sink: sink, expression: textOf(value), origin: origin, parts: partsOf(value, scope) });
   };
+  FN_PATHS = new WeakMap();
   parser.traverse(ast, {
+    Function(p) {
+      FN_PATHS.set(p.node, p);
+    },
     CallExpression: {
       exit(p) {
         if (p.node.callee.type !== 'Identifier') return;
@@ -411,6 +605,7 @@ function sinksIn(parser, code, file, lineOffset) {
         sink: h.sink,
         expression: textOf(arg),
         origin: origin,
+        parts: partsOf(arg, call.scope),
         via: { fn: h.param.fn, line: lineOf(h.node) },
       });
     }
@@ -518,18 +713,29 @@ function describe(f) {
         'HTML entities). If the HTML is meant to allow some formatting, pass it through a sanitizer ' +
         'such as DOMPurify first.',
     ];
+  // A long template is mostly harmless markup. Naming the part that decides it
+  // keeps the fix - and the AI tool doing it - to that part alone.
+  const parts = (f.parts || []).filter((p) => p.text && p.text !== f.expression);
+  const only = parts.length
+    ? [''].concat(
+      [(parts.length === 1 ? 'Only this part' : 'Only these parts') + ' of it can carry text from outside the page, ' +
+        'so only ' + (parts.length === 1 ? 'it needs' : 'they need') + ' changing:'],
+      parts.map((p) => '    ${' + p.text + '}'),
+    )
+    : [];
   const fixPrompt = [
     'My app may have a security problem - please check it rather than assume it.',
     '',
     where,
     '',
     '    ' + f.expression,
+  ].concat(only, [
     '',
     'The value is ' + ORIGIN_WORDS[f.origin] + '. If it can ever contain text a user or another ' +
       'account typed, a "<" in it becomes a real tag and can run script in this page with the ' +
       "signed-in person's session.",
     '',
-  ].concat(fix, [
+  ]).concat(fix, [
     '',
     'Keep the page looking the same, change only how this value is inserted, and look for the ' +
       'same pattern elsewhere in this file. Afterwards, open this page and check that ordinary ' +
@@ -546,6 +752,7 @@ function describe(f) {
     sink: f.sink,
     expression: f.expression,
     origin: f.origin,
+    parts: (f.parts || []).map((p) => ({ text: p.text, origin: p.origin })),
     via: f.via || null,
     headline: 'Text ' + (f.origin === 'unknown' ? 'of unknown origin' : ORIGIN_WORDS[f.origin].split(',')[0]) +
       ' is inserted as HTML in ' + f.file + ':' + f.line +

package/kryptheon-dashboard-page.js

@@ -279,6 +279,100 @@
     });
   }
 
+  /* ------------------------------ connect your AI tool ------------------------------ */
+
+  // The same set-up kryptheon.tech shows, so the two never disagree. Every
+  // step comes from that tool's own documentation, except where a tool is
+  // marked tested - there it was run by hand. Static text: nothing here comes
+  // from the project being checked.
+  var SERVER = { command: 'npx', args: ['-y', 'kryptheon-mcp'] };
+  var MCP_JSON = JSON.stringify({ mcpServers: { kryptheon: SERVER } }, null, 2);
+  var VSCODE_JSON = JSON.stringify({ servers: { kryptheon: SERVER } }, null, 2);
+  var AI_TOOLS = [
+    { id: 'claude-code', name: 'Claude Code', tested: true,
+      steps: ['Run this once, in any terminal. That is the whole set-up.'],
+      code: 'claude mcp add kryptheon -- npx -y kryptheon-mcp', file: 'terminal' },
+    { id: 'cursor', name: 'Cursor', tested: false,
+      oneClick: { href: 'cursor://anysphere.cursor-deeplink/mcp/install?name=kryptheon&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsImtyeXB0aGVvbi1tY3AiXX0=', label: 'Add to Cursor' },
+      steps: ['Press Add to Cursor. Cursor asks you to confirm - say yes.', 'Or by hand: paste the config into mcp.json in the .cursor folder of your home folder.'],
+      code: MCP_JSON, file: '~/.cursor/mcp.json' },
+    { id: 'vscode', name: 'VS Code', tested: false,
+      oneClick: { href: 'vscode:mcp/install?' + encodeURIComponent(JSON.stringify({ name: 'kryptheon', command: 'npx', args: ['-y', 'kryptheon-mcp'] })), label: 'Install in VS Code' },
+      steps: ['Press Install in VS Code and confirm.', 'Or by hand: run MCP: Add Server from the Command Palette, or put the config in .vscode/mcp.json - VS Code calls the list "servers", not "mcpServers".'],
+      code: VSCODE_JSON, file: '.vscode/mcp.json' },
+    { id: 'antigravity', name: 'Antigravity', tested: false,
+      steps: ['Open Settings, bottom left, then Customizations, then Add MCP. The MCP Store opens.', 'Click Manage MCP Servers, then View raw config.', 'Paste the config and save. Antigravity reloads it by itself.'],
+      code: MCP_JSON, file: '~/.gemini/config/mcp_config.json' },
+    { id: 'windsurf', name: 'Windsurf', tested: false,
+      steps: ['In the Cascade panel, open the ... menu at the top right and click Open MCP config file.', 'Paste the config and save.'],
+      note: 'Windsurf is Devin Desktop now. Use the menu rather than hunting for the file: newer versions keep it in %APPDATA%\\devin, older ones in .codeium\\windsurf.',
+      code: MCP_JSON, file: 'mcp_config.json' },
+    { id: 'claude-desktop', name: 'Claude Desktop', tested: false,
+      steps: ['From the Claude menu choose Settings..., then Developer, then Edit Config.', 'Paste the config and save.', 'Quit Claude completely - not just the window - and open it again.'],
+      code: MCP_JSON, file: 'claude_desktop_config.json' },
+    { id: 'codex', name: 'Codex', tested: false,
+      steps: ['Run this once, in any terminal.'],
+      code: 'codex mcp add kryptheon -- npx -y kryptheon-mcp', file: 'terminal' },
+  ];
+  var aiTool = 'claude-code';
+
+  function renderAI() {
+    var tabs = byId('aiTabs');
+    var panel = byId('aiPanel');
+    if (!tabs || !panel) return;
+    clear(tabs);
+    clear(panel);
+    AI_TOOLS.forEach(function (t, i) {
+      var b = el('button', 'ai-tab' + (t.id === aiTool ? ' on' : ''));
+      b.type = 'button';
+      b.setAttribute('role', 'tab');
+      b.setAttribute('aria-selected', t.id === aiTool ? 'true' : 'false');
+      b.appendChild(el('span', 'ai-num', String(i + 1).padStart(2, '0')));
+      b.appendChild(el('span', 'ai-name', t.name));
+      if (t.oneClick) b.appendChild(el('span', 'ai-tag', '1-click'));
+      b.addEventListener('click', function () { aiTool = t.id; renderAI(); });
+      tabs.appendChild(b);
+    });
+    var tool = AI_TOOLS.filter(function (t) { return t.id === aiTool; })[0] || AI_TOOLS[0];
+    panel.appendChild(el('span', 'ai-badge' + (tool.tested ? ' tested' : ''), tool.tested ? 'Tested by hand' : "From " + tool.name + "'s own docs - not tested by hand yet"));
+    panel.appendChild(el('h4', null, tool.name));
+    if (tool.oneClick) {
+      var oc = el('div', 'ai-oneclick');
+      var link = el('a', 'btn sun', tool.oneClick.label + ' →');
+      link.href = tool.oneClick.href;
+      oc.appendChild(link);
+      oc.appendChild(el('small', null, 'or by hand, below'));
+      panel.appendChild(oc);
+    }
+    var ol = el('ol', 'ai-steps');
+    tool.steps.forEach(function (s, i) {
+      var li = el('li');
+      li.appendChild(el('span', null, String(i + 1)));
+      li.appendChild(el('div', null, s));
+      ol.appendChild(li);
+    });
+    panel.appendChild(ol);
+    var plate = el('div', 'ai-plate');
+    var bar = el('div', 'ai-plate-bar');
+    bar.appendChild(el('span', null, tool.file));
+    var cp = el('button', null, 'Copy');
+    cp.type = 'button';
+    cp.addEventListener('click', function () { copy(tool.code, tool.file === 'terminal' ? 'Command copied - run it in a terminal' : 'Config copied - paste it into ' + tool.file); });
+    bar.appendChild(cp);
+    plate.appendChild(bar);
+    plate.appendChild(el('pre', null, tool.code));
+    panel.appendChild(plate);
+    if (tool.note) panel.appendChild(el('p', 'ai-note', tool.note));
+    if (tool.file !== 'terminal') {
+      panel.appendChild(el('p', 'ai-note', 'On Windows, if it says it cannot start npx: use "command": "cmd" and "args": ["/c", "npx", "-y", "kryptheon-mcp"] instead.'));
+    }
+    panel.appendChild(el('p', 'ai-note', 'To let it check your database too, add "env": { "KN_DATABASE_URL": "postgresql://..." } to the kryptheon entry. Never paste the connection string into the chat - that puts the password to your whole database in a transcript.'));
+    var then = el('p', 'ai-then');
+    then.appendChild(document.createTextNode('Then just ask your assistant: '));
+    then.appendChild(el('b', null, '“Check my app.”'));
+    panel.appendChild(then);
+  }
+
   /* ---------------------------------- findings ---------------------------------- */
 
   var statusFilter = 'all';
@@ -595,6 +689,7 @@
       .catch(function (err) { byId('subline').textContent = 'Could not load: ' + err.message; });
   }
 
+  renderAI();
   showView();
   load();
   // Not while something runs, and not while a finding is open being read.

package/kryptheon-dashboard.html

@@ -157,6 +157,36 @@
   .cmd-copy { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--line-dark); color: var(--on-dark); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
   .cmd-copy:hover { color: var(--orange); border-color: var(--orange); }
 
+  /* --- connect your AI tool: an index of tools, one tool's page ------------ */
+  .ai { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 34px; padding-top: 18px; }
+  @media (max-width: 900px) { .ai { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
+  .ai-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
+  @media (max-width: 900px) { .ai-tabs { flex-direction: row; flex-wrap: wrap; } }
+  .ai-tab { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 13px 8px 13px 14px; text-align: left; border-bottom: 1px solid var(--line); transition: color 0.3s var(--ease), padding 0.3s var(--ease); }
+  .ai-tab .ai-num { font: 10px var(--mono); color: var(--muted); }
+  .ai-tab .ai-name { font-weight: 800; font-stretch: 74%; text-transform: uppercase; }
+  .ai-tab .ai-tag { margin-left: auto; font: 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
+  .ai-tab:hover, .ai-tab.on { color: var(--orange-deep); }
+  .ai-tab.on { padding-left: 20px; }
+  .ai-tab.on::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 3px; background: var(--orange); }
+  .ai-panel h4 { margin: 10px 0 0; font-weight: 900; font-stretch: 63%; font-size: clamp(2rem, 4vw, 3rem); line-height: 0.95; text-transform: uppercase; }
+  .ai-badge { font: 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
+  .ai-badge.tested { color: var(--orange-deep); }
+  .ai-steps { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
+  .ai-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 12px 0; font-size: 14px; line-height: 1.55; border-bottom: 1px solid var(--line); }
+  .ai-steps li span { font: 13px var(--mono); color: var(--orange); }
+  .ai-oneclick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
+  .ai-oneclick small { font: 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
+  .ai-plate { margin-top: 18px; color: var(--on-dark); background: var(--ink); }
+  .ai-plate-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; font: 10.5px var(--mono); border-bottom: 1px solid var(--line-dark); }
+  .ai-plate-bar span { opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .ai-plate-bar button { flex: none; padding: 6px 12px; font: 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line-dark); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
+  .ai-plate-bar button:hover { color: var(--orange); border-color: var(--orange); }
+  .ai-plate pre { margin: 0; padding: 16px 14px 18px; overflow-x: auto; font: 12.5px/1.7 var(--mono); white-space: pre; }
+  .ai-note { max-width: 66ch; margin: 14px 0 0; padding-left: 14px; font-size: 13.5px; line-height: 1.6; color: var(--muted); border-left: 2px solid var(--orange); }
+  .ai-then { margin-top: 20px; font-size: 14px; }
+  .ai-then b { font-weight: 900; font-stretch: 63%; font-size: 1.6rem; text-transform: uppercase; }
+
   /* --- tags: orange acts, ink states --------------------------------------- */
   .tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 9.5px; letter-spacing: 0.12em; white-space: nowrap; color: var(--muted); border: 1px solid var(--line); }
   .tag.ember, .tag.sun { color: var(--orange-deep); border-color: var(--orange); }
@@ -282,6 +312,13 @@
         <div class="card-head"><div><h3>Start here</h3><div class="c-sub">Do these in order. A step is done only once it has actually run.</div></div></div>
         <div class="steps" id="steps"></div>
       </div>
+      <div class="card gap">
+        <div class="card-head"><div><h3>Connect your AI tool</h3><div class="c-sub">Optional - your assistant then checks its own work, and does not call a change done until the check passes</div></div></div>
+        <div class="ai">
+          <div class="ai-tabs" id="aiTabs" role="tablist" aria-label="Your AI tool"></div>
+          <div class="ai-panel" id="aiPanel" role="tabpanel"></div>
+        </div>
+      </div>
     </section>
 
     <section class="view" id="view-findings" hidden>

package/kryptheon-dashboard.js

@@ -127,6 +127,13 @@ function recentChanges(root) {
   };
 }
 
+/** "  -  the risky part: x" for a frontend finding that names one, else "". */
+function riskyPartsLine(f) {
+  const parts = (f.parts || []).filter((p) => p && p.text && p.text !== f.expression);
+  if (!parts.length) return '';
+  return '  -  the risky part' + (parts.length === 1 ? ': ' : 's: ') + parts.map((p) => p.text).join(', ');
+}
+
 /** When this flow last passed, from the run history, or null. */
 function lastPassOf(history, title) {
   for (let i = history.length - 1; i >= 0; i--) {
@@ -197,7 +204,9 @@ function startSteps(checks, seen) {
     {
       id: 'record',
       title: 'Record your main flows',
-      why: 'Sign up, log in, pay - do each once while Kryptheon watches. It then knows what "working" looks like.',
+      // The lesson of a test where 26 bugs were planted before recording and
+      // none was caught: what is recorded is taken as right.
+      why: 'Sign up, log in, pay - do each once while Kryptheon watches. Record while your app works: what it sees is taken as right, so a bug already there when you record becomes part of "working".',
       state: seen.recordings ? 'done' : 'todo',
       at: null,
       count: seen.recordings,
@@ -214,7 +223,7 @@ function startSteps(checks, seen) {
     {
       id: 'data',
       title: 'Check your database',
-      why: 'Attacks a copy of your Postgres or Supabase database and reports what got in. Needs your connection string, so it runs in your terminal.',
+      why: 'Attacks a copy inside your Postgres or Supabase database and reports what got in; your own rows are not touched. It asks for the connection string - in Supabase: Project Settings, Database, Connection string, URI. Try it on a test project first. It runs in your terminal, so the string never reaches this page.',
       state: !on('data') ? 'off' : seen.nightAt ? 'done' : 'todo',
       at: seen.nightAt,
       action: on('data') ? { kind: 'command', command: 'npx kryptheon-night' } : null,
@@ -290,7 +299,9 @@ function buildState(root, env) {
         confidence: f.confidence,
         where: f.file + ':' + f.line,
         headline: f.headline,
-        detail: f.sink + ': ' + f.expression,
+        // The part of a long template that decides it, so the person reading
+        // it looks at one value instead of sixty lines of markup.
+        detail: f.sink + ': ' + f.expression + riskyPartsLine(f),
         fixPrompt: f.fixPrompt,
         when: code.checkedAt,
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kryptheon",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "description": "Record what you do in your app and get plain-language reports when it breaks.",
   "license": "MIT",
   "type": "commonjs",