claude-code/components/permissions/PermissionExplanation.tsx

import { c as _c } from "react/compiler-runtime";
import React, { Suspense, use, useState } from 'react';
import { Box, Text } from '../../ink.js';
import { useKeybinding } from '../../keybindings/useKeybinding.js';
import { logEvent } from '../../services/analytics/index.js';
import type { Message } from '../../types/message.js';
import { generatePermissionExplanation, isPermissionExplainerEnabled, type PermissionExplanation as PermissionExplanationType, type RiskLevel } from '../../utils/permissions/permissionExplainer.js';
import { ShimmerChar } from '../Spinner/ShimmerChar.js';
import { useShimmerAnimation } from '../Spinner/useShimmerAnimation.js';
const LOADING_MESSAGE = 'Loading explanation…';
function ShimmerLoadingText() {
  const $ = _c(7);
  const [ref, glimmerIndex] = useShimmerAnimation("responding", LOADING_MESSAGE, false);
  let t0;
  if ($[0] !== glimmerIndex) {
    t0 = LOADING_MESSAGE.split("").map((char, index) => <ShimmerChar key={index} char={char} index={index} glimmerIndex={glimmerIndex} messageColor="inactive" shimmerColor="text" />);
    $[0] = glimmerIndex;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  let t1;
  if ($[2] !== t0) {
    t1 = <Text>{t0}</Text>;
    $[2] = t0;
    $[3] = t1;
  } else {
    t1 = $[3];
  }
  let t2;
  if ($[4] !== ref || $[5] !== t1) {
    t2 = <Box ref={ref}>{t1}</Box>;
    $[4] = ref;
    $[5] = t1;
    $[6] = t2;
  } else {
    t2 = $[6];
  }
  return t2;
}
function getRiskColor(riskLevel: RiskLevel): 'success' | 'warning' | 'error' {
  switch (riskLevel) {
    case 'LOW':
      return 'success';
    case 'MEDIUM':
      return 'warning';
    case 'HIGH':
      return 'error';
  }
}
function getRiskLabel(riskLevel: RiskLevel): string {
  switch (riskLevel) {
    case 'LOW':
      return 'Low risk';
    case 'MEDIUM':
      return 'Med risk';
    case 'HIGH':
      return 'High risk';
  }
}
type PermissionExplanationProps = {
  toolName: string;
  toolInput: unknown;
  toolDescription?: string;
  messages?: Message[];
};
type ExplainerState = {
  visible: boolean;
  enabled: boolean;
  promise: Promise<PermissionExplanationType | null> | null;
};

/**
 * Creates an explanation promise that never rejects.
 * Errors are caught and returned as null.
 */
function createExplanationPromise(props: PermissionExplanationProps): Promise<PermissionExplanationType | null> {
  return generatePermissionExplanation({
    toolName: props.toolName,
    toolInput: props.toolInput,
    toolDescription: props.toolDescription,
    messages: props.messages,
    signal: new AbortController().signal // Won't abort - request is fast enough
  }).catch(() => null);
}

/**
 * Hook that manages the permission explainer state.
 * Creates the fetch promise lazily (only when user hits Ctrl+E)
 * to avoid consuming tokens for explanations users never view.
 */
export function usePermissionExplainerUI(props) {
  const $ = _c(9);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = isPermissionExplainerEnabled();
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  const enabled = t0;
  const [visible, setVisible] = useState(false);
  const [promise, setPromise] = useState(null);
  let t1;
  if ($[1] !== promise || $[2] !== props || $[3] !== visible) {
    t1 = () => {
      if (!visible) {
        logEvent("tengu_permission_explainer_shortcut_used", {});
        if (!promise) {
          setPromise(createExplanationPromise(props));
        }
      }
      setVisible(_temp);
    };
    $[1] = promise;
    $[2] = props;
    $[3] = visible;
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  let t2;
  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = {
      context: "Confirmation",
      isActive: enabled
    };
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  useKeybinding("confirm:toggleExplanation", t1, t2);
  let t3;
  if ($[6] !== promise || $[7] !== visible) {
    t3 = {
      visible,
      enabled,
      promise
    };
    $[6] = promise;
    $[7] = visible;
    $[8] = t3;
  } else {
    t3 = $[8];
  }
  return t3;
}

/**
 * Inner component that uses React 19's use() to read the promise.
 * Suspends while loading, returns null on error.
 */
function _temp(v) {
  return !v;
}
function ExplanationResult(t0) {
  const $ = _c(21);
  const {
    promise
  } = t0;
  const explanation = use(promise);
  if (!explanation) {
    let t1;
    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
      t1 = <Box marginTop={1}><Text dimColor={true}>Explanation unavailable</Text></Box>;
      $[0] = t1;
    } else {
      t1 = $[0];
    }
    return t1;
  }
  let t1;
  if ($[1] !== explanation.explanation) {
    t1 = <Text>{explanation.explanation}</Text>;
    $[1] = explanation.explanation;
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  let t2;
  if ($[3] !== explanation.reasoning) {
    t2 = <Box marginTop={1}><Text>{explanation.reasoning}</Text></Box>;
    $[3] = explanation.reasoning;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  let t3;
  if ($[5] !== explanation.riskLevel) {
    t3 = getRiskColor(explanation.riskLevel);
    $[5] = explanation.riskLevel;
    $[6] = t3;
  } else {
    t3 = $[6];
  }
  let t4;
  if ($[7] !== explanation.riskLevel) {
    t4 = getRiskLabel(explanation.riskLevel);
    $[7] = explanation.riskLevel;
    $[8] = t4;
  } else {
    t4 = $[8];
  }
  let t5;
  if ($[9] !== t3 || $[10] !== t4) {
    t5 = <Text color={t3}>{t4}:</Text>;
    $[9] = t3;
    $[10] = t4;
    $[11] = t5;
  } else {
    t5 = $[11];
  }
  let t6;
  if ($[12] !== explanation.risk) {
    t6 = <Text> {explanation.risk}</Text>;
    $[12] = explanation.risk;
    $[13] = t6;
  } else {
    t6 = $[13];
  }
  let t7;
  if ($[14] !== t5 || $[15] !== t6) {
    t7 = <Box marginTop={1}><Text>{t5}{t6}</Text></Box>;
    $[14] = t5;
    $[15] = t6;
    $[16] = t7;
  } else {
    t7 = $[16];
  }
  let t8;
  if ($[17] !== t1 || $[18] !== t2 || $[19] !== t7) {
    t8 = <Box flexDirection="column" marginTop={1}>{t1}{t2}{t7}</Box>;
    $[17] = t1;
    $[18] = t2;
    $[19] = t7;
    $[20] = t8;
  } else {
    t8 = $[20];
  }
  return t8;
}

/**
 * Content component - shows loading (via Suspense) or explanation when visible
 */
export function PermissionExplainerContent(t0) {
  const $ = _c(3);
  const {
    visible,
    promise
  } = t0;
  if (!visible || !promise) {
    return null;
  }
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = <Box marginTop={1}><ShimmerLoadingText /></Box>;
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  let t2;
  if ($[1] !== promise) {
    t2 = <Suspense fallback={t1}><ExplanationResult promise={promise} /></Suspense>;
    $[1] = promise;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  return t2;
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIlN1c3BlbnNlIiwidXNlIiwidXNlU3RhdGUiLCJCb3giLCJUZXh0IiwidXNlS2V5YmluZGluZyIsImxvZ0V2ZW50IiwiTWVzc2FnZSIsImdlbmVyYXRlUGVybWlzc2lvbkV4cGxhbmF0aW9uIiwiaXNQZXJtaXNzaW9uRXhwbGFpbmVyRW5hYmxlZCIsIlBlcm1pc3Npb25FeHBsYW5hdGlvbiIsIlBlcm1pc3Npb25FeHBsYW5hdGlvblR5cGUiLCJSaXNrTGV2ZWwiLCJTaGltbWVyQ2hhciIsInVzZVNoaW1tZXJBbmltYXRpb24iLCJMT0FESU5HX01FU1NBR0UiLCJTaGltbWVyTG9hZGluZ1RleHQiLCIkIiwiX2MiLCJyZWYiLCJnbGltbWVySW5kZXgiLCJ0MCIsInNwbGl0IiwibWFwIiwiY2hhciIsImluZGV4IiwidDEiLCJ0MiIsImdldFJpc2tDb2xvciIsInJpc2tMZXZlbCIsImdldFJpc2tMYWJlbCIsIlBlcm1pc3Npb25FeHBsYW5hdGlvblByb3BzIiwidG9vbE5hbWUiLCJ0b29sSW5wdXQiLCJ0b29sRGVzY3JpcHRpb24iLCJtZXNzYWdlcyIsIkV4cGxhaW5lclN0YXRlIiwidmlzaWJsZSIsImVuYWJsZWQiLCJwcm9taXNlIiwiUHJvbWlzZSIsImNyZWF0ZUV4cGxhbmF0aW9uUHJvbWlzZSIsInByb3BzIiwic2lnbmFsIiwiQWJvcnRDb250cm9sbGVyIiwiY2F0Y2giLCJ1c2VQZXJtaXNzaW9uRXhwbGFpbmVyVUkiLCJTeW1ib2wiLCJmb3IiLCJzZXRWaXNpYmxlIiwic2V0UHJvbWlzZSIsIl90ZW1wIiwiY29udGV4dCIsImlzQWN0aXZlIiwidDMiLCJ2IiwiRXhwbGFuYXRpb25SZXN1bHQiLCJleHBsYW5hdGlvbiIsInJlYXNvbmluZyIsInQ0IiwidDUiLCJ0NiIsInJpc2siLCJ0NyIsInQ4IiwiUGVybWlzc2lvbkV4cGxhaW5lckNvbnRlbnQiXSwic291cmNlcyI6WyJQZXJtaXNzaW9uRXhwbGFuYXRpb24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBTdXNwZW5zZSwgdXNlLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLi4vLi4vaW5rLmpzJ1xuaW1wb3J0IHsgdXNlS2V5YmluZGluZyB9IGZyb20gJy4uLy4uL2tleWJpbmRpbmdzL3VzZUtleWJpbmRpbmcuanMnXG5pbXBvcnQgeyBsb2dFdmVudCB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2FuYWx5dGljcy9pbmRleC5qcydcbmltcG9ydCB0eXBlIHsgTWVzc2FnZSB9IGZyb20gJy4uLy4uL3R5cGVzL21lc3NhZ2UuanMnXG5pbXBvcnQge1xuICBnZW5lcmF0ZVBlcm1pc3Npb25FeHBsYW5hdGlvbixcbiAgaXNQZXJtaXNzaW9uRXhwbGFpbmVyRW5hYmxlZCxcbiAgdHlwZSBQZXJtaXNzaW9uRXhwbGFuYXRpb24gYXMgUGVybWlzc2lvbkV4cGxhbmF0aW9uVHlwZSxcbiAgdHlwZSBSaXNrTGV2ZWwsXG59IGZyb20gJy4uLy4uL3V0aWxzL3Blcm1pc3Npb25zL3Blcm1pc3Npb25FeHBsYWluZXIuanMnXG5pbXBvcnQgeyBTaGltbWVyQ2hhciB9IGZyb20gJy4uL1NwaW5uZXIvU2hpbW1lckNoYXIuanMnXG5pbXBvcnQgeyB1c2VTaGltbWVyQW5pbWF0aW9uIH0gZnJvbSAnLi4vU3Bpbm5lci91c2VTaGltbWVyQW5pbWF0aW9uLmpzJ1xuXG5jb25zdCBMT0FESU5HX01FU1NBR0UgPSAnTG9hZGluZyBleHBsYW5hdGlvbuKApidcblxuZnVuY3Rpb24gU2hpbW1lckxvYWRpbmdUZXh0KCk6IFJlYWN0LlJlYWN0Tm9kZSB7XG4gIGNvbnN0IFtyZWYsIGdsaW1tZXJJbmRleF0gPSB1c2VTaGltbWVyQW5pbWF0aW9uKFxuICAgICdyZXNwb25kaW5nJyxcbiAgICBMT0FESU5HX01FU1NBR0UsXG4gICAgZmFsc2UsXG4gIClcblxuICByZXR1cm4gKFxuICAgIDxCb3ggcmVmPXtyZWZ9PlxuICAgICAgPFRleHQ+XG4gICAgICAgIHtMT0FESU5HX01FU1NBR0Uuc3BsaXQoJycpLm1hcCgoY2hhciwgaW5kZXgpID0+IChcbiAgICAgICAgICA8U2hpbW1lckNoYXJcbiAgICAgICAgICAgIGtleT17aW5kZXh9XG4gICAgICAgICAgICBjaGFyPXtjaGFyfVxuICAgICAgICAgICAgaW5kZXg9e2luZGV4fVxuICAgICAgICAgICAgZ2xpbW1lckluZGV4PXtnbGltbWVySW5kZXh9XG4gICAgICAgICAgICBtZXNzYWdlQ29sb3I9XCJpbmFjdGl2ZVwiXG4gICAgICAgICAgICBzaGltbWVyQ29sb3I9XCJ0ZXh0XCJcbiAgICAgICAgICAvPlxuICAgICAgICApKX1cbiAgICAgIDwvVGV4dD5cbiAgICA8L0JveD5cbiAgKVxufVxuXG5mdW5jdGlvbiBnZXRSaXNrQ29sb3Iocmlza0xldmVsOiBSaXNrTGV2ZWwpOiAnc3VjY2VzcycgfCAnd2FybmluZycgfCAnZXJyb3InIHtcbiAgc3dpdGNoIChyaXNrTGV2ZWwpIHtcbiAgICBjYXNlICdMT1cnOlxuICAgICAgcmV0dXJuICdzdWNjZXNzJ1xuICAgIGNhc2UgJ01FRElVTSc6XG4gICAgICByZXR1cm4gJ3dhcm5pbmcnXG4gICAgY2FzZSAnSElHSCc6XG4gICAgICByZXR1cm4gJ2Vycm9yJ1xuICB9XG59XG5cbmZ1bmN0aW9uIGdldFJpc2tMYWJlbChyaXNrTGV2ZWw6IFJpc2tMZXZlbCk6IHN0cmluZyB7XG4gIHN3aXRjaCAocmlza0xldmVsKSB7XG4gICAgY2FzZSAnTE9XJzpcbiAgICAgIHJldHVybiAnTG93IHJpc2snXG4gICAgY2FzZSAnTUVESVVNJzpcbiAgICAgIHJldHVybiAnTWVkIHJpc2snXG4gICAgY2FzZSAnSElHSCc6XG4gICAgICByZXR1cm4gJ0hpZ2ggcmlzaydcbiAgfVxufVxuXG50eXBlIFBlcm1pc3Npb25FeHBsYW5hdGlvblByb3BzID0ge1xuICB0b29sTmFtZTogc3RyaW5nXG4gIHRvb2xJbnB1dDogdW5rbm93blxuICB0b29sRGVzY3JpcHRpb24/OiBzdHJpbmdcbiAgbWVzc2FnZXM/OiBNZXNzYWdlW11cbn1cblxudHlwZSBFeHBsYWluZXJTdGF0ZSA9IHtcbiAgdmlzaWJsZTogYm9vbGVhblxuICBlbmFibGVkOiBib29sZWFuXG4gIHByb21pc2U6IFByb21pc2U8UGVybWlzc2lvbkV4cGxhbmF0aW9uVHlwZSB8IG51bGw+IHwgbnVsbFxufVxuXG4vKipcbiAqIENyZWF0ZXMgYW4gZXhwbGFuYXRpb24gcHJvbWlzZSB0aGF0IG5ldmVyIHJlamVjdHMuXG4gKiBFcnJvcnMgYXJlIGNhdWdodCBhbmQgcmV0dXJuZWQgYXMgbnVsbC5cbiAqL1xuZnVuY3Rpb24gY3JlYXRlRXhwbGFuYXRpb25Qcm9taXNlKFxuICBwcm9wczogUGVybWlzc2l