feat: mask provider api key input (#772)

src/utils/Cursor.ts

@@ -148,6 +148,42 @@ type Position = {
   column: number
 }
 
+export function maskTextWithVisibleEdges(
+  value: string,
+  mask: string,
+  visiblePrefix = 3,
+  visibleSuffix = 3,
+): string {
+  if (!mask || !value) return value
+
+  const graphemes = Array.from(getGraphemeSegmenter().segment(value))
+  const secretGraphemeCount = graphemes.filter(
+    ({ segment }) => segment !== '\n',
+  ).length
+  const visibleCount = visiblePrefix + visibleSuffix
+
+  if (secretGraphemeCount <= visibleCount) {
+    return graphemes
+      .map(({ segment }) => (segment === '\n' ? segment : mask))
+      .join('')
+  }
+
+  let secretIndex = 0
+  return graphemes
+    .map(({ segment }) => {
+      if (segment === '\n') return segment
+
+      const nextSegment =
+        secretIndex < visiblePrefix ||
+        secretIndex >= secretGraphemeCount - visibleSuffix
+          ? segment
+          : mask
+      secretIndex += 1
+      return nextSegment
+    })
+    .join('')
+}
+
 export class Cursor {
   readonly offset: number
   constructor(
@@ -208,7 +244,12 @@ export class Cursor {
     maxVisibleLines?: number,
   ) {
     const { line, column } = this.getPosition()
-    const allLines = this.measuredText.getWrappedText()
+    const allLines = mask
+      ? new MeasuredText(
+          maskTextWithVisibleEdges(this.text, mask),
+          this.measuredText.columns,
+        ).getWrappedText()
+      : this.measuredText.getWrappedText()
 
     const startLine = this.getViewportStartLine(maxVisibleLines)
     const endLine =
@@ -221,23 +262,6 @@ export class Cursor {
       .map((text, i) => {
         const currentLine = i + startLine
         let displayText = text
-        if (mask) {
-          const graphemes = Array.from(getGraphemeSegmenter().segment(text))
-          if (currentLine === allLines.length - 1) {
-            // Last line: mask all but the trailing 6 chars so the user can
-            // confirm they pasted the right thing without exposing the full token
-            const visibleCount = Math.min(6, graphemes.length)
-            const maskCount = graphemes.length - visibleCount
-            const splitOffset =
-              graphemes.length > visibleCount ? graphemes[maskCount]!.index : 0
-            displayText = mask.repeat(maskCount) + text.slice(splitOffset)
-          } else {
-            // Earlier wrapped lines: fully mask. Previously only the last line
-            // was masked, leaking the start of the token on narrow terminals
-            // where the pasted OAuth code wraps across multiple lines.
-            displayText = mask.repeat(graphemes.length)
-          }
-        }
         // looking for the line with the cursor
         if (line !== currentLine) return displayText.trimEnd()