feat: improv GitHub token guidance in UI and error messages for private repositories

Author: FloareDor

src/app/[owner]/[repo]/page.tsx

@@ -1056,6 +1056,19 @@ ${context}`,
 					}}
 				>
 					{toastMessage}
+					{shouldSuggestGitHubToken(toastMessage) && (
+						<>
+							<br />
+							<a
+								href="https://github.com/settings/tokens/new?scopes=repo&description=GitAsk"
+								target="_blank"
+								rel="noopener noreferrer"
+								style={{ color: "var(--text-on-dark)", textDecoration: "underline", textUnderlineOffset: "2px" }}
+							>
+								Get a token
+							</a>
+						</>
+					)}
 				</div>
 			)}
 

src/components/chat/TokenInput.tsx

@@ -9,29 +9,42 @@ interface TokenInputProps {
 
 export function TokenInput({ tokenDraft, tokenChanged, onChange, onApply }: TokenInputProps) {
 	return (
-		<div style={{ padding: "8px 20px", borderBottom: "2px solid var(--border-dark)", display: "flex", gap: "8px", background: "var(--bg-app)", flexShrink: 0 }}>
-			<input
-				className="input"
-				type="password"
-				placeholder="GitHub Personal Access Token (optional, for higher rate limits)"
-				value={tokenDraft}
-				onChange={(e) => onChange(e.target.value)}
-				onKeyDown={(e) => {
-					if (e.key === "Enter") {
-						e.preventDefault();
-						onApply();
-					}
-				}}
-				style={{ flex: 1, fontSize: "13px", background: "var(--bg-card-dark)", border: "2px solid var(--border-dark)", color: "var(--text-on-dark)", padding: "8px 12px", outline: "none" }}
-			/>
-			<button
-				type="button"
-				style={{ fontSize: "12px", padding: "5px 10px", background: "transparent", border: "1px solid var(--border-dark)", color: "var(--text-on-dark-secondary)", cursor: "pointer" }}
-				onClick={onApply}
-				disabled={!tokenChanged}
-			>
-				Apply
-			</button>
+		<div style={{ padding: "8px 20px 10px", borderBottom: "2px solid var(--border-dark)", background: "var(--bg-app)", flexShrink: 0 }}>
+			<div style={{ display: "flex", gap: "8px" }}>
+				<input
+					className="input"
+					type="password"
+					placeholder="GitHub Personal Access Token (required for private repos)"
+					value={tokenDraft}
+					onChange={(e) => onChange(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") {
+							e.preventDefault();
+							onApply();
+						}
+					}}
+					style={{ flex: 1, fontSize: "13px", background: "var(--bg-card-dark)", border: "2px solid var(--border-dark)", color: "var(--text-on-dark)", padding: "8px 12px", outline: "none" }}
+				/>
+				<button
+					type="button"
+					style={{ fontSize: "12px", padding: "5px 10px", background: "transparent", border: "1px solid var(--border-dark)", color: "var(--text-on-dark-secondary)", cursor: "pointer" }}
+					onClick={onApply}
+					disabled={!tokenChanged}
+				>
+					Apply
+				</button>
+			</div>
+			<div style={{ marginTop: "5px", fontSize: "11px", color: "var(--text-on-dark-secondary)" }}>
+				Don't have one?{" "}
+				<a
+					href="https://github.com/settings/tokens/new?scopes=repo&description=GitAsk"
+					target="_blank"
+					rel="noopener noreferrer"
+					style={{ color: "var(--text-on-dark-secondary)", textDecoration: "underline", textUnderlineOffset: "2px" }}
+				>
+					Get a GitHub token
+				</a>
+			</div>
 		</div>
 	);
 }

src/lib/github.ts

@@ -46,7 +46,7 @@ async function readGitHubErrorMessage(res: Response): Promise<string> {
 }
 
 function privateRepoGuidance(owner: string, repo: string): string {
-	return `Couldn't find this repo. Is it private? Add a GitHub token in "GH Token" to access it.`;
+	return `repo not found. is it private? add a GitHub token to access it.`;
 }
 
 function headers(token?: string): HeadersInit {