Blame · Line-by-line history

`editor.tsx`

Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.

editor.tsxBlame1740 lines · 1 contributor

Normal view Raw

0074234Claude	1	/**
	2	* Web file editor — create and edit files directly in the browser.
e26af57Claude	3	*
	4	* 2026 polish: this surface uses a scoped `.editor-*` class system that
	5	* mirrors `admin-integrations.tsx` and `collaborators.tsx` — gradient
	6	* hairline, mono breadcrumb pill, commit-message input with focus ring,
	7	* primary commit + ghost cancel buttons, and an AI "Suggest" button that
	8	* sits inline. The git operations themselves are unchanged.
3646bfeClaude	9	*
	10	* CodeMirror 6 enhancement: The plain textarea is replaced with a
	11	* CodeMirror 6 editor loaded from CDN (esm.sh). The textarea is kept
	12	* hidden and synced on every change so the existing form POST works
	13	* without server changes. Language is auto-detected from the file extension.
0074234Claude	14	*/
	15
	16	import { Hono } from "hono";
	17	import { Layout } from "../views/layout";
e26af57Claude	18	import { RepoHeader, RepoNav } from "../views/components";
	19	import { EmptyState } from "../views/ui";
0074234Claude	20	import {
	21	getBlob,
	22	getRepoPath,
	23	} from "../git/repository";
c81b57cClaude	24	import { generateCommitMessage } from "../lib/ai-generators";
	25	import { isAiAvailable } from "../lib/ai-client";
0074234Claude	26	import { softAuth, requireAuth } from "../middleware/auth";
	27	import type { AuthEnv } from "../middleware/auth";
04f6b7fClaude	28	import { requireRepoAccess } from "../middleware/repo-access";
c315551Claude	29	import { audit } from "../lib/notify";
	30	import { AI_AUDIT_ACTIONS } from "../lib/ai-hours-saved";
0074234Claude	31
	32	const editor = new Hono<AuthEnv>();
	33
	34	editor.use("*", softAuth);
	35
c81b57cClaude	36	/**
	37	* Inline JS for the editor's "Suggest with AI" commit-message button.
	38	* Picks up the textarea content + form-pinned ref/filePath, POSTs JSON
	39	* to the suggest endpoint, fills the message Input on success.
	40	*
	41	* Built as a string so we don't need a bundler. JSON-escapes against
	42	* </script> breakout. Defensive DOM lookups (silent no-op on absence).
	43	*/
	44	function AI_COMMIT_MSG_SCRIPT(args: {
	45	endpoint: string;
	46	ref: string;
	47	filePath: string;
	48	}): string {
	49	const safe = (v: string) =>
	50	JSON.stringify(v)
	51	.split("<").join("\\u003C")
	52	.split(">").join("\\u003E")
	53	.split("&").join("\\u0026");
	54	const url = safe(args.endpoint);
	55	const ref = safe(args.ref);
	56	const filePath = safe(args.filePath);
	57	return (
	58	"(function(){try{" +
	59	"var btn=document.getElementById('ai-commit-msg-btn');" +
	60	"var status=document.getElementById('ai-commit-msg-status');" +
	61	"var input=document.getElementById('commit-message-input');" +
	62	"var ta=document.querySelector('textarea[name=\"content\"]');" +
	63	"if(!btn\|\|!input\|\|!ta)return;" +
	64	"btn.addEventListener('click',function(ev){ev.preventDefault();" +
	65	"btn.disabled=true;if(status)status.textContent='Drafting (10-30s)...';" +
	66	"var fd='ref='+encodeURIComponent(" + ref + ")+'&filePath='+encodeURIComponent(" + filePath + ")+'&content='+encodeURIComponent(ta.value\|\|'');" +
	67	"fetch(" + url + ",{method:'POST',headers:{'content-type':'application/x-www-form-urlencoded'},body:fd,credentials:'same-origin'})" +
	68	".then(function(r){return r.json().catch(function(){return {ok:false,error:'Server error.'};});})" +
	69	".then(function(j){btn.disabled=false;" +
	70	"if(j&&j.ok&&typeof j.message==='string'){" +
	71	"if(input.value&&input.value.trim().length>0){if(!confirm('Replace existing message?')){if(status)status.textContent='Cancelled.';return;}}" +
	72	"input.value=j.message;if(status)status.textContent='Filled from AI. Edit before committing.';" +
	73	"}else{if(status)status.textContent=(j&&j.error)\|\|'AI unavailable.';}" +
	74	"}).catch(function(){btn.disabled=false;if(status)status.textContent='Network error.';});" +
	75	"});" +
	76	"}catch(e){}})();"
	77	);
	78	}
	79
3646bfeClaude	80	/**
	81	* Detect a language identifier from a file path/name for CodeMirror.
	82	* Returns a string like "typescript", "python", "markdown", etc.
	83	* Used server-side to embed a data-lang attribute.
	84	*/
	85	function detectEditorLang(filePath: string): string {
	86	const lower = filePath.toLowerCase();
	87	const ext = lower.split(".").pop() \|\| "";
	88	switch (ext) {
	89	case "ts":
	90	case "tsx":
	91	return "typescript";
	92	case "js":
	93	case "jsx":
	94	case "mjs":
	95	case "cjs":
	96	return "javascript";
	97	case "py":
	98	return "python";
	99	case "md":
	100	case "mdx":
	101	return "markdown";
	102	case "json":
	103	case "jsonc":
	104	return "json";
	105	case "css":
	106	case "scss":
	107	case "sass":
	108	case "less":
	109	return "css";
	110	case "html":
	111	case "htm":
	112	return "html";
	113	case "sh":
	114	case "bash":
	115	case "zsh":
	116	return "shell";
	117	case "sql":
	118	return "sql";
	119	case "xml":
	120	return "xml";
	121	case "yaml":
	122	case "yml":
	123	return "yaml";
	124	case "rs":
	125	return "rust";
	126	case "go":
	127	return "go";
	128	case "java":
	129	return "java";
	130	case "rb":
	131	return "ruby";
	132	case "php":
	133	return "php";
	134	case "c":
	135	case "h":
	136	return "c";
	137	case "cpp":
	138	case "cc":
	139	case "cxx":
	140	case "hh":
	141	case "hpp":
	142	return "cpp";
	143	default:
	144	return "plaintext";
	145	}
	146	}
	147
	148	/**
	149	* CodeMirror 6 initialization script — loaded from esm.sh CDN.
	150	* Mounts a CodeMirror editor in place of the hidden textarea.
	151	* Syncs on every change so the form POST continues to work.
	152	* The textareaId identifies the hidden textarea to sync to.
	153	* The lang attribute controls language detection + dynamic import.
	154	*/
	155	function CODEMIRROR_INIT_SCRIPT(args: {
	156	textareaId: string;
	157	wrapperId: string;
	158	lang: string;
	159	}): string {
	160	const safe = (v: string) =>
	161	JSON.stringify(v)
	162	.split("<").join("\\u003C")
	163	.split(">").join("\\u003E")
	164	.split("&").join("\\u0026");
	165	const textareaId = safe(args.textareaId);
	166	const wrapperId = safe(args.wrapperId);
	167	const lang = safe(args.lang);
	168
	169	return `
	170	(async function() {
	171	try {
	172	var ta = document.getElementById(${textareaId});
	173	var wrapper = document.getElementById(${wrapperId});
	174	if (!ta \|\| !wrapper) return;
	175
	176	// Load CodeMirror 6 core from esm.sh
	177	var [cmView, cmState, cmCommands, cmLanguage, cmTheme] = await Promise.all([
	178	import('https://esm.sh/@codemirror/view@6'),
	179	import('https://esm.sh/@codemirror/state@6'),
	180	import('https://esm.sh/@codemirror/commands@6'),
	181	import('https://esm.sh/@codemirror/language@6'),
	182	import('https://esm.sh/@codemirror/theme-one-dark@6')
	183	]);
	184
	185	var { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightSpecialChars } = cmView;
	186	var { EditorState, Compartment } = cmState;
	187	var { defaultKeymap, indentWithTab, historyKeymap, history } = cmCommands;
	188	var { indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldGutter } = cmLanguage;
	189	var { oneDark } = cmTheme;
	190
	191	// Dynamically load language support
	192	var langExtension = [];
	193	try {
	194	var langStr = ${lang};
	195	if (langStr === 'typescript' \|\| langStr === 'javascript') {
	196	var jsLang = await import('https://esm.sh/@codemirror/lang-javascript@6');
	197	langExtension = [jsLang.javascript({ typescript: langStr === 'typescript', jsx: true })];
	198	} else if (langStr === 'python') {
	199	var pyLang = await import('https://esm.sh/@codemirror/lang-python@6');
	200	langExtension = [pyLang.python()];
	201	} else if (langStr === 'markdown') {
	202	var mdLang = await import('https://esm.sh/@codemirror/lang-markdown@6');
	203	langExtension = [mdLang.markdown()];
	204	} else if (langStr === 'json') {
	205	var jsonLang = await import('https://esm.sh/@codemirror/lang-json@6');
	206	langExtension = [jsonLang.json()];
	207	} else if (langStr === 'css') {
	208	var cssLang = await import('https://esm.sh/@codemirror/lang-css@6');
	209	langExtension = [cssLang.css()];
	210	} else if (langStr === 'html') {
	211	var htmlLang = await import('https://esm.sh/@codemirror/lang-html@6');
	212	langExtension = [htmlLang.html()];
	213	} else if (langStr === 'shell') {
	214	var { StreamLanguage } = cmLanguage;
	215	var shellLang = await import('https://esm.sh/@codemirror/legacy-modes@6/src/shell');
	216	langExtension = [StreamLanguage.define(shellLang.shell)];
	217	} else if (langStr === 'sql') {
	218	var sqlLang = await import('https://esm.sh/@codemirror/lang-sql@6');
	219	langExtension = [sqlLang.sql()];
	220	} else if (langStr === 'rust') {
	221	var rsLang = await import('https://esm.sh/@codemirror/lang-rust@6');
	222	langExtension = [rsLang.rust()];
	223	} else if (langStr === 'cpp' \|\| langStr === 'c') {
	224	var cppLang = await import('https://esm.sh/@codemirror/lang-cpp@6');
	225	langExtension = [cppLang.cpp()];
	226	} else if (langStr === 'java') {
	227	var javaLang = await import('https://esm.sh/@codemirror/lang-java@6');
	228	langExtension = [javaLang.java()];
	229	} else if (langStr === 'xml') {
	230	var xmlLang = await import('https://esm.sh/@codemirror/lang-xml@6');
	231	langExtension = [xmlLang.xml()];
	232	} else if (langStr === 'yaml') {
	233	var { StreamLanguage } = cmLanguage;
	234	var yamlLang = await import('https://esm.sh/@codemirror/legacy-modes@6/src/yaml');
	235	langExtension = [StreamLanguage.define(yamlLang.yaml)];
	236	} else if (langStr === 'go') {
	237	var { StreamLanguage } = cmLanguage;
	238	var goLang = await import('https://esm.sh/@codemirror/legacy-modes@6/src/go');
	239	langExtension = [StreamLanguage.define(goLang.go)];
	240	} else if (langStr === 'ruby') {
	241	var { StreamLanguage } = cmLanguage;
	242	var rubyLang = await import('https://esm.sh/@codemirror/legacy-modes@6/src/ruby');
	243	langExtension = [StreamLanguage.define(rubyLang.ruby)];
	244	} else if (langStr === 'php') {
	245	var phpLang = await import('https://esm.sh/@codemirror/lang-php@6');
	246	langExtension = [phpLang.php()];
	247	}
	248	} catch(e) {
	249	// language load failure is non-fatal — continue without highlighting
	250	langExtension = [];
	251	}
	252
	253	var initialContent = ta.value;
	254
	255	var updateListener = EditorView.updateListener.of(function(update) {
	256	if (update.docChanged) {
	257	ta.value = update.state.doc.toString();
	258	}
	259	});
	260
	261	var editorTheme = EditorView.theme({
	262	'&': {
	263	background: 'var(--bg)',
	264	color: 'var(--text)',
	265	border: '1px solid var(--border-strong)',
	266	borderRadius: '10px',
	267	minHeight: '280px',
	268	fontSize: '13px',
	269	lineHeight: '1.55',
	270	fontFamily: 'var(--font-mono)',
	271	},
	272	'.cm-content': {
	273	padding: '12px 14px',
	274	caretColor: '#a48bff',
	275	},
	276	'.cm-focused': {
	277	outline: 'none',
	278	},
	279	'&.cm-focused': {
	280	borderColor: 'rgba(140,109,255,0.55)',
	281	boxShadow: '0 0 0 3px rgba(140,109,255,0.18)',
	282	},
	283	'.cm-gutters': {
	284	background: 'rgba(255,255,255,0.02)',
	285	borderRight: '1px solid var(--border)',
	286	color: 'var(--text-faint)',
	287	paddingRight: '4px',
	288	},
	289	'.cm-activeLineGutter': {
	290	background: 'rgba(140,109,255,0.08)',
	291	},
	292	'.cm-activeLine': {
	293	background: 'rgba(140,109,255,0.06)',
	294	},
	295	'.cm-scroller': {
	296	overflow: 'auto',
	297	minHeight: '280px',
	298	maxHeight: '70vh',
	299	},
	300	'.cm-cursor': {
	301	borderLeftColor: '#a48bff',
	302	},
	303	});
	304
	305	var state = EditorState.create({
	306	doc: initialContent,
	307	extensions: [
	308	history(),
	309	lineNumbers(),
	310	highlightActiveLine(),
	311	highlightActiveLineGutter(),
	312	drawSelection(),
	313	dropCursor(),
	314	rectangularSelection(),
	315	crosshairCursor(),
	316	highlightSpecialChars(),
	317	indentOnInput(),
	318	syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
	319	bracketMatching(),
	320	foldGutter(),
	321	keymap.of([indentWithTab, ...defaultKeymap, ...historyKeymap]),
	322	oneDark,
	323	editorTheme,
	324	updateListener,
	325	...langExtension,
	326	EditorView.lineWrapping,
	327	],
	328	});
	329
	330	var view = new EditorView({
	331	state: state,
	332	parent: wrapper,
	333	});
	334
	335	// Hide the textarea now that CM is mounted
	336	ta.style.display = 'none';
	337	wrapper.style.display = 'block';
	338
	339	// Sync on form submit (belt-and-suspenders)
	340	var form = ta.closest('form');
	341	if (form) {
	342	form.addEventListener('submit', function() {
	343	ta.value = view.state.doc.toString();
	344	});
	345	}
	346
	347	} catch(e) {
	348	// If CodeMirror fails to load for any reason, fall back to the textarea
	349	var ta2 = document.getElementById(${textareaId});
	350	if (ta2) ta2.style.display = '';
	351	var w2 = document.getElementById(${wrapperId});
	352	if (w2) w2.style.display = 'none';
	353	}
	354	})();
	355	`;
	356	}
	357
6f2809fClaude	358	/**
	359	* AI inline suggestion + explain + fix script.
	360	*
	361	* Ghost-text suggestions: debounced 800ms after typing stops, sends
	362	* the content before the cursor to /api/ai/suggest, shows the result
	363	* as dimmed italic text after the cursor inside the textarea.
	364	* Tab = accept, Escape = dismiss.
	365	*
	366	* Explain: sends selected text (or full content) to /api/ai/explain
	367	* and shows a panel below the editor.
	368	*
	369	* Fix: sends error from ?error= query param + code to /api/ai/fix and
	370	* shows a panel with an Apply button.
	371	*
	372	* Only wires up if window.__aiEditorEnabled === true (set by the server
	373	* when ANTHROPIC_API_KEY is configured).
	374	*/
	375	function AI_EDITOR_SCRIPT(args: {
	376	lang: string;
	377	gateError: string; // JSON-safe error string, may be empty
	378	}): string {
	379	const safe = (v: string) =>
	380	JSON.stringify(v)
	381	.split("<").join("\\u003C")
	382	.split(">").join("\\u003E")
	383	.split("&").join("\\u0026");
	384
	385	const lang = safe(args.lang);
	386	const gateError = safe(args.gateError);
	387
	388	return `
	389	(function() {
	390	try {
	391	if (!window.__aiEditorEnabled) return;
	392
	393	var lang = ${lang};
	394	var gateError = ${gateError};
	395
	396	// ── Find DOM elements ──────────────────────────────────────────────
	397	// Works for both new-file (...-new) and edit (...-edit) pages.
	398	var ta = document.querySelector('textarea[name="content"]');
	399	if (!ta) return;
	400
	401	var taField = ta.closest('.editor-field');
	402	if (!taField) return;
	403
	404	// Ensure the textarea is wrapped in .editor-wrapper for positioning
	405	if (!ta.parentElement \|\| !ta.parentElement.classList.contains('editor-wrapper')) {
	406	var wrapper = document.createElement('div');
	407	wrapper.className = 'editor-wrapper';
	408	wrapper.style.position = 'relative';
	409	ta.parentNode.insertBefore(wrapper, ta);
	410	wrapper.appendChild(ta);
	411	}
	412
	413	var editorWrapper = ta.parentElement;
	414
	415	// Loading spinner
	416	var spinner = document.createElement('div');
	417	spinner.className = 'ai-loading';
	418	spinner.innerHTML = '<div class="ai-spinner"></div><span>AI</span>';
	419	editorWrapper.appendChild(spinner);
	420
	421	// Suggestion hint line
	422	var hint = document.createElement('div');
	423	hint.className = 'ai-suggestion-hint';
	424	hint.textContent = 'Tab to accept suggestion · Esc to dismiss';
	425	taField.appendChild(hint);
	426
	427	// Explain panel
	428	var explainPanel = document.createElement('div');
	429	explainPanel.className = 'ai-explain-panel';
	430	explainPanel.innerHTML = '<div class="ai-explain-panel-header"><span class="ai-explain-panel-title">✨ Code Explanation</span><button class="ai-explain-panel-close" type="button" title="Close">✕</button></div><div class="ai-explain-panel-body"></div>';
	431	taField.appendChild(explainPanel);
	432
	433	// Fix panel (only when there's a gate error)
	434	var fixPanel = null;
	435	var fixCode = '';
	436	if (gateError) {
	437	fixPanel = document.createElement('div');
	438	fixPanel.className = 'ai-fix-panel';
	439	fixPanel.innerHTML = '<div class="ai-fix-panel-header"><span class="ai-fix-panel-title">⚡ AI Fix Suggestion</span></div><div class="ai-fix-panel-explanation"></div><button class="ai-fix-panel-apply" type="button">Apply fix</button>';
	440	taField.appendChild(fixPanel);
	441	}
	442
	443	// ── State ──────────────────────────────────────────────────────────
	444	var currentSuggestion = '';
	445	var suggestionPos = 0; // cursor position when suggestion was fetched
	446	var debounceTimer = null;
	447	var abortController = null;
	448
	449	// ── Ghost text rendering via textarea mirror technique ─────────────
	450	// We render ghost text as a ::after-like element via a positioned div
	451	// that mirrors the textarea's scroll position and font metrics.
	452	// This is simpler than a full overlay mirror.
	453	var ghost = document.createElement('div');
	454	ghost.style.cssText = [
	455	'position:absolute',
	456	'left:0','top:0','right:0','bottom:0',
	457	'pointer-events:none',
	458	'overflow:hidden',
	459	'white-space:pre-wrap',
	460	'word-wrap:break-word',
	461	'box-sizing:border-box',
	462	'padding:12px 14px',
	463	'font-family:var(--font-mono)',
	464	'font-size:13px',
	465	'line-height:1.55',
	466	'color:transparent',
	467	'z-index:2',
	468	].join(';');
	469	editorWrapper.appendChild(ghost);
	470
	471	function renderGhost() {
	472	if (!currentSuggestion) {
	473	ghost.innerHTML = '';
	474	hint.classList.remove('visible');
	475	return;
	476	}
	477	var before = ta.value.slice(0, suggestionPos);
	478	// Escape HTML
	479	var esc = function(s) {
	480	return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
	481	};
	482	ghost.innerHTML = esc(before) +
	483	'<span style="color:#666;font-style:italic">' + esc(currentSuggestion) + '</span>';
	484	hint.classList.add('visible');
	485	}
	486
	487	function clearSuggestion() {
	488	currentSuggestion = '';
	489	suggestionPos = 0;
	490	renderGhost();
	491	}
	492
	493	// ── Sync ghost scroll with textarea ───────────────────────────────
	494	ta.addEventListener('scroll', function() {
	495	ghost.scrollTop = ta.scrollTop;
	496	ghost.scrollLeft = ta.scrollLeft;
	497	});
	498
	499	// ── Fetch suggestion ──────────────────────────────────────────────
	500	function fetchSuggestion() {
	501	if (abortController) abortController.abort();
	502	abortController = new AbortController();
	503
	504	var cursor = ta.selectionStart;
	505	var code = ta.value;
	506	var before = code.slice(0, cursor);
	507
	508	// Skip if the before-cursor content is too short or ends in whitespace-only
	509	if (before.trim().length < 3) return;
	510
	511	spinner.classList.add('visible');
	512
	513	fetch('/api/ai/suggest', {
	514	method: 'POST',
	515	headers: { 'content-type': 'application/json' },
	516	credentials: 'same-origin',
	517	signal: abortController.signal,
	518	body: JSON.stringify({ code: before, language: lang, cursor: before.length }),
	519	})
	520	.then(function(r) { return r.json(); })
	521	.then(function(j) {
	522	spinner.classList.remove('visible');
	523	if (j && typeof j.suggestion === 'string' && j.suggestion.trim()) {
	524	currentSuggestion = j.suggestion;
	525	suggestionPos = ta.selectionStart;
	526	renderGhost();
	527	}
	528	if (j && j.error && j.error.includes('quota')) {
	529	// Show quota message briefly in hint
	530	hint.textContent = j.error;
	531	hint.classList.add('visible');
	532	setTimeout(function() {
	533	hint.textContent = 'Tab to accept suggestion · Esc to dismiss';
	534	hint.classList.remove('visible');
	535	}, 4000);
	536	}
	537	})
	538	.catch(function(e) {
	539	spinner.classList.remove('visible');
	540	if (e && e.name !== 'AbortError') {
	541	console.debug('[ai-editor] suggest error', e);
	542	}
	543	});
	544	}
	545
	546	// ── Debounce typing ───────────────────────────────────────────────
	547	ta.addEventListener('input', function() {
	548	clearSuggestion();
	549	if (debounceTimer) clearTimeout(debounceTimer);
	550	debounceTimer = setTimeout(fetchSuggestion, 800);
	551	});
	552
	553	// ── Key handling: Tab = accept, Escape = dismiss ──────────────────
	554	ta.addEventListener('keydown', function(ev) {
	555	if (currentSuggestion) {
	556	if (ev.key === 'Tab') {
	557	ev.preventDefault();
	558	// Insert suggestion at cursor
	559	var start = ta.selectionStart;
	560	var end = ta.selectionEnd;
	561	var before = ta.value.slice(0, start);
	562	var after = ta.value.slice(end);
	563	ta.value = before + currentSuggestion + after;
	564	var newPos = start + currentSuggestion.length;
	565	ta.selectionStart = ta.selectionEnd = newPos;
	566	// Trigger input event so the form stays in sync
	567	ta.dispatchEvent(new Event('input', { bubbles: true }));
	568	clearSuggestion();
	569	return;
	570	}
	571	if (ev.key === 'Escape') {
	572	ev.preventDefault();
	573	clearSuggestion();
	574	return;
	575	}
	576	// Any other key: discard suggestion
	577	clearSuggestion();
	578	}
	579	});
	580
	581	// Dismiss on click (cursor moved)
	582	ta.addEventListener('click', clearSuggestion);
	583
	584	// ── Explain panel ──────────────────────────────────────────────────
	585	var explainBody = explainPanel.querySelector('.ai-explain-panel-body');
	586	var explainClose = explainPanel.querySelector('.ai-explain-panel-close');
	587	if (explainClose) {
	588	explainClose.addEventListener('click', function() {
	589	explainPanel.classList.remove('visible');
	590	});
	591	}
	592
	593	var explainBtn = document.getElementById('ai-explain-btn');
	594	if (explainBtn) {
	595	explainBtn.addEventListener('click', function(ev) {
	596	ev.preventDefault();
	597	var selected = ta.value.slice(ta.selectionStart, ta.selectionEnd);
	598	var code = selected.trim() \|\| ta.value;
	599	if (!code.trim()) return;
	600	explainBtn.disabled = true;
	601	explainBody.textContent = 'Asking Claude…';
	602	explainPanel.classList.add('visible');
	603	fetch('/api/ai/explain', {
	604	method: 'POST',
	605	headers: { 'content-type': 'application/json' },
	606	credentials: 'same-origin',
	607	body: JSON.stringify({ code: code.slice(0, 4000), language: lang }),
	608	})
	609	.then(function(r) { return r.json(); })
	610	.then(function(j) {
	611	explainBtn.disabled = false;
	612	if (j && j.explanation) {
	613	explainBody.textContent = j.explanation;
	614	} else {
	615	explainBody.textContent = (j && j.error) \|\| 'No explanation returned.';
	616	}
	617	})
	618	.catch(function() {
	619	explainBtn.disabled = false;
	620	explainBody.textContent = 'Network error — please try again.';
	621	});
	622	});
	623	}
	624
	625	// ── Fix panel ─────────────────────────────────────────────────────
	626	if (fixPanel && gateError) {
	627	var fixBtn = document.getElementById('ai-fix-btn');
	628	var fixExplanation = fixPanel.querySelector('.ai-fix-panel-explanation');
	629	var fixApply = fixPanel.querySelector('.ai-fix-panel-apply');
	630
	631	if (fixBtn) {
	632	fixBtn.addEventListener('click', function(ev) {
	633	ev.preventDefault();
	634	fixBtn.disabled = true;
	635	fixExplanation.textContent = 'Analyzing error and generating fix…';
	636	fixPanel.classList.add('visible');
	637	fetch('/api/ai/fix', {
	638	method: 'POST',
	639	headers: { 'content-type': 'application/json' },
	640	credentials: 'same-origin',
	641	body: JSON.stringify({ code: ta.value.slice(0, 4000), error: gateError, language: lang }),
	642	})
	643	.then(function(r) { return r.json(); })
	644	.then(function(j) {
	645	fixBtn.disabled = false;
	646	if (j && j.fix) {
	647	fixCode = j.fix;
	648	fixExplanation.textContent = j.explanation \|\| 'Fix ready.';
	649	fixApply.style.display = 'inline-flex';
	650	} else {
	651	fixExplanation.textContent = (j && j.error) \|\| 'Could not generate fix.';
	652	fixApply.style.display = 'none';
	653	}
	654	})
	655	.catch(function() {
	656	fixBtn.disabled = false;
	657	fixExplanation.textContent = 'Network error — please try again.';
	658	});
	659	});
	660
	661	// Auto-trigger if gate error is present and editor just loaded
	662	setTimeout(function() { fixBtn.click(); }, 600);
	663	}
	664
	665	if (fixApply) {
	666	fixApply.addEventListener('click', function() {
	667	if (!fixCode) return;
	668	if (confirm('Apply the AI fix? This will replace the current editor content.')) {
	669	ta.value = fixCode;
	670	ta.dispatchEvent(new Event('input', { bubbles: true }));
	671	fixPanel.classList.remove('visible');
	672	}
	673	});
	674	}
	675	}
	676
	677	} catch(e) {
	678	console.debug('[ai-editor] init error', e);
	679	}
	680	})();
	681	`;
	682	}
	683
e26af57Claude	684	// ─── Scoped CSS (.editor-*) ─────────────────────────────────────────────────
	685	// Every selector is prefixed `.editor-*` so this surface can't bleed into
	686	// the repo header / nav above. Tokens reused from layout (--bg-elevated,
	687	// --border, --text-strong, --accent, --space-, --font-).
	688
	689	const editorStyles = `
eed4684Claude	690	.editor-wrap { max-width: 1680px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-8); }
e26af57Claude	691
	692	/* ─── Header strip (sits below RepoHeader + RepoNav) ─── */
	693	.editor-head { margin-bottom: var(--space-5); }
	694	.editor-eyebrow {
	695	display: inline-flex;
	696	align-items: center;
	697	gap: 8px;
	698	text-transform: uppercase;
	699	font-family: var(--font-mono);
	700	font-size: 11px;
	701	letter-spacing: 0.16em;
	702	color: var(--text-muted);
	703	font-weight: 600;
	704	margin-bottom: 10px;
	705	}
	706	.editor-eyebrow-dot {
	707	width: 8px; height: 8px;
	708	border-radius: 9999px;
	709	background: linear-gradient(135deg, #8c6dff, #36c5d6);
	710	box-shadow: 0 0 0 3px rgba(140,109,255,0.18);
	711	}
	712	.editor-title {
	713	font-family: var(--font-display);
	714	font-size: clamp(22px, 3vw, 32px);
	715	font-weight: 800;
	716	letter-spacing: -0.025em;
	717	line-height: 1.15;
	718	margin: 0 0 6px;
	719	color: var(--text-strong);
	720	}
	721	.editor-title-grad {
	722	background-image: linear-gradient(135deg, #a48bff 0%, #8c6dff 50%, #36c5d6 100%);
	723	-webkit-background-clip: text;
	724	background-clip: text;
	725	-webkit-text-fill-color: transparent;
	726	color: transparent;
	727	}
	728	.editor-sub {
	729	margin: 0;
	730	font-size: 14px;
	731	color: var(--text-muted);
	732	line-height: 1.5;
	733	max-width: 700px;
	734	}
	735
	736	/* ─── Toolbar (path breadcrumb + branch pill) ─── */
	737	.editor-toolbar {
	738	display: flex;
	739	align-items: center;
	740	justify-content: space-between;
	741	gap: var(--space-3);
	742	flex-wrap: wrap;
	743	margin-bottom: var(--space-3);
	744	padding: 10px 14px;
	745	background: var(--bg-elevated);
	746	border: 1px solid var(--border);
	747	border-radius: 12px;
	748	}
	749	.editor-path {
	750	display: inline-flex;
	751	align-items: center;
	752	gap: 6px;
	753	font-family: var(--font-mono);
	754	font-size: 13px;
	755	color: var(--text);
	756	flex-wrap: wrap;
	757	min-width: 0;
	758	}
	759	.editor-path-sep { color: var(--text-faint); }
	760	.editor-path-seg {
	761	color: var(--text-muted);
	762	}
	763	.editor-path-name {
	764	color: var(--text-strong);
	765	font-weight: 600;
	766	}
	767	.editor-branch-pill {
	768	display: inline-flex;
	769	align-items: center;
	770	gap: 6px;
	771	padding: 4px 10px;
	772	border-radius: 999px;
	773	font-family: var(--font-mono);
	774	font-size: 12px;
	775	color: #c4b5fd;
	776	background: rgba(140,109,255,0.12);
	777	box-shadow: inset 0 0 0 1px rgba(140,109,255,0.30);
	778	white-space: nowrap;
	779	font-weight: 600;
	780	}
	781	.editor-branch-pill svg { opacity: 0.9; }
	782
	783	/* ─── Form card ─── */
	784	.editor-card {
	785	background: var(--bg-elevated);
	786	border: 1px solid var(--border);
	787	border-radius: 14px;
	788	overflow: hidden;
	789	position: relative;
	790	}
	791	.editor-card::before {
	792	content: '';
	793	position: absolute;
	794	top: 0; left: 0; right: 0;
	795	height: 2px;
	796	background: linear-gradient(90deg, transparent 0%, #8c6dff 30%, #36c5d6 70%, transparent 100%);
	797	opacity: 0.55;
	798	pointer-events: none;
	799	}
	800	.editor-body { padding: var(--space-4) var(--space-5); }
	801
	802	.editor-field { display: block; margin-bottom: var(--space-4); }
	803	.editor-label {
	804	display: block;
	805	font-size: 11.5px;
	806	color: var(--text-muted);
	807	font-weight: 600;
	808	text-transform: uppercase;
	809	letter-spacing: 0.06em;
	810	margin-bottom: 6px;
	811	}
	812	.editor-filename-row {
	813	display: flex;
	814	align-items: center;
	815	gap: 6px;
	816	font-family: var(--font-mono);
	817	}
	818	.editor-filename-dir {
	819	font-size: 13px;
	820	color: var(--text-muted);
	821	}
	822	.editor-input {
	823	width: 100%;
	824	box-sizing: border-box;
	825	padding: 10px 12px;
	826	font: inherit;
	827	font-size: 14px;
	828	color: var(--text);
	829	background: rgba(255,255,255,0.03);
	830	border: 1px solid var(--border-strong);
	831	border-radius: 10px;
	832	transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
	833	}
	834	.editor-input:focus {
	835	outline: none;
	836	border-color: rgba(140,109,255,0.55);
	837	background: rgba(255,255,255,0.05);
	838	box-shadow: 0 0 0 3px rgba(140,109,255,0.18);
	839	}
	840	.editor-input-mono { font-family: var(--font-mono); }
	841
	842	.editor-textarea {
	843	width: 100%;
	844	box-sizing: border-box;
	845	padding: 12px 14px;
	846	font: inherit;
	847	font-family: var(--font-mono);
	848	font-size: 13px;
	849	line-height: 1.55;
	850	tab-size: 2;
	851	color: var(--text);
	852	background: var(--bg);
	853	border: 1px solid var(--border-strong);
	854	border-radius: 10px;
	855	resize: vertical;
	856	min-height: 280px;
	857	transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
	858	}
	859	.editor-textarea:focus {
	860	outline: none;
	861	border-color: rgba(140,109,255,0.55);
	862	box-shadow: 0 0 0 3px rgba(140,109,255,0.18);
	863	}
	864
	865	/* ─── Action row ─── */
	866	.editor-actions {
	867	display: flex;
	868	align-items: center;
	869	gap: 10px;
	870	flex-wrap: wrap;
	871	padding: var(--space-3) var(--space-5);
	872	border-top: 1px solid var(--border);
	873	background: rgba(255,255,255,0.012);
	874	}
	875	.editor-btn {
	876	display: inline-flex;
	877	align-items: center;
	878	justify-content: center;
	879	gap: 6px;
	880	padding: 9px 16px;
	881	border-radius: 10px;
	882	font-size: 13px;
	883	font-weight: 600;
	884	text-decoration: none;
	885	border: 1px solid transparent;
	886	cursor: pointer;
	887	font: inherit;
	888	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
	889	line-height: 1;
	890	white-space: nowrap;
	891	}
	892	.editor-btn-primary {
	893	background: linear-gradient(135deg, #8c6dff 0%, #36c5d6 100%);
	894	color: #fff;
	895	box-shadow: 0 6px 18px -6px rgba(140,109,255,0.5), inset 0 1px 0 rgba(255,255,255,0.16);
	896	}
	897	.editor-btn-primary:hover {
	898	transform: translateY(-1px);
	899	box-shadow: 0 10px 24px -8px rgba(140,109,255,0.6), inset 0 1px 0 rgba(255,255,255,0.20);
	900	text-decoration: none;
	901	color: #fff;
	902	}
	903	.editor-btn-ghost {
	904	background: transparent;
	905	color: var(--text);
	906	border-color: var(--border-strong);
	907	}
	908	.editor-btn-ghost:hover {
	909	background: rgba(140,109,255,0.06);
	910	border-color: rgba(140,109,255,0.45);
	911	color: var(--text-strong);
	912	text-decoration: none;
	913	}
	914	.editor-btn-ai {
	915	background: transparent;
	916	color: #c4b5fd;
	917	border-color: rgba(140,109,255,0.35);
	918	}
	919	.editor-btn-ai:hover {
	920	border-color: rgba(140,109,255,0.65);
	921	background: rgba(140,109,255,0.08);
	922	color: #ddd6fe;
	923	text-decoration: none;
	924	}
	925	.editor-btn-ai:disabled {
	926	opacity: 0.55;
	927	cursor: progress;
	928	}
	929	.editor-status {
	930	color: var(--text-muted);
	931	font-size: 12.5px;
	932	margin-left: auto;
	933	}
3646bfeClaude	934
	935	/* ─── CodeMirror wrapper ─── */
	936	.editor-cm-wrapper {
	937	display: none; /* shown by JS after mount */
	938	border-radius: 10px;
	939	overflow: hidden;
	940	}
	941	/* Ensure CM fills the field column */
	942	.editor-field .cm-editor {
	943	width: 100%;
	944	box-sizing: border-box;
	945	font-family: var(--font-mono);
	946	font-size: 13px;
	947	line-height: 1.55;
	948	border-radius: 10px;
	949	min-height: 280px;
	950	}
	951	/* Override oneDark background to match the app's dark bg variable */
	952	.editor-field .cm-editor .cm-scroller {
	953	font-family: var(--font-mono);
	954	}
6f2809fClaude	955
	956	/* ─── AI inline suggestion overlay ─── */
	957	.editor-wrapper {
	958	position: relative;
	959	}
	960	.ai-suggestion {
	961	position: absolute;
	962	color: #555;
	963	font-style: italic;
	964	pointer-events: none;
	965	white-space: pre;
	966	font-family: var(--font-mono);
	967	font-size: 13px;
	968	line-height: 1.55;
	969	}
	970	.ai-loading {
	971	position: absolute;
	972	right: 10px;
	973	top: 10px;
	974	font-size: 11px;
	975	color: #888;
	976	display: none;
	977	align-items: center;
	978	gap: 5px;
	979	pointer-events: none;
	980	z-index: 10;
	981	}
	982	.ai-loading.visible { display: flex; }
	983	.ai-spinner {
	984	width: 10px;
	985	height: 10px;
	986	border: 1.5px solid rgba(164,139,255,0.3);
	987	border-top-color: #a48bff;
	988	border-radius: 50%;
	989	animation: ai-spin 0.7s linear infinite;
	990	}
	991	@keyframes ai-spin {
	992	to { transform: rotate(360deg); }
	993	}
	994
	995	/* ─── AI explain panel ─── */
	996	.ai-explain-panel {
	997	background: #1a1a2e;
	998	border: 1px solid #2a2a4a;
	999	border-radius: 8px;
	1000	padding: 14px 16px;
	1001	margin-top: 10px;
	1002	display: none;
	1003	position: relative;
	1004	}
	1005	.ai-explain-panel.visible { display: block; }
	1006	.ai-explain-panel-header {
	1007	display: flex;
	1008	align-items: center;
	1009	justify-content: space-between;
	1010	margin-bottom: 8px;
	1011	}
	1012	.ai-explain-panel-title {
	1013	font-size: 11px;
	1014	font-weight: 700;
	1015	text-transform: uppercase;
	1016	letter-spacing: 0.1em;
	1017	color: #a48bff;
	1018	}
	1019	.ai-explain-panel-close {
	1020	background: none;
	1021	border: none;
	1022	color: var(--text-faint);
	1023	cursor: pointer;
	1024	font-size: 14px;
	1025	line-height: 1;
	1026	padding: 2px 5px;
	1027	border-radius: 4px;
	1028	}
	1029	.ai-explain-panel-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
	1030	.ai-explain-panel-body {
	1031	font-size: 13px;
	1032	color: var(--text-muted);
	1033	line-height: 1.6;
	1034	white-space: pre-wrap;
	1035	word-break: break-word;
	1036	}
	1037
	1038	/* ─── AI fix panel ─── */
	1039	.ai-fix-panel {
	1040	background: #1a1a2e;
	1041	border: 1px solid #2a2a4a;
	1042	border-left: 3px solid #f59e0b;
	1043	border-radius: 8px;
	1044	padding: 14px 16px;
	1045	margin-top: 10px;
	1046	display: none;
	1047	}
	1048	.ai-fix-panel.visible { display: block; }
	1049	.ai-fix-panel-header {
	1050	display: flex;
	1051	align-items: center;
	1052	justify-content: space-between;
	1053	margin-bottom: 8px;
	1054	}
	1055	.ai-fix-panel-title {
	1056	font-size: 11px;
	1057	font-weight: 700;
	1058	text-transform: uppercase;
	1059	letter-spacing: 0.1em;
	1060	color: #f59e0b;
	1061	}
	1062	.ai-fix-panel-explanation {
	1063	font-size: 12.5px;
	1064	color: var(--text-muted);
	1065	margin-bottom: 10px;
	1066	line-height: 1.5;
	1067	}
	1068	.ai-fix-panel-apply {
	1069	display: inline-flex;
	1070	align-items: center;
	1071	gap: 5px;
	1072	padding: 6px 12px;
	1073	background: rgba(245,158,11,0.12);
	1074	border: 1px solid rgba(245,158,11,0.35);
	1075	border-radius: 6px;
	1076	color: #f59e0b;
	1077	font-size: 12px;
	1078	font-weight: 600;
	1079	cursor: pointer;
	1080	font: inherit;
	1081	transition: background 100ms ease;
	1082	}
	1083	.ai-fix-panel-apply:hover { background: rgba(245,158,11,0.22); }
	1084
	1085	/* ─── AI badge ─── */
	1086	.ai-powered-badge {
	1087	display: inline-flex;
	1088	align-items: center;
	1089	gap: 4px;
	1090	font-size: 11px;
	1091	color: #a48bff;
	1092	background: rgba(140,109,255,0.08);
	1093	border: 1px solid rgba(140,109,255,0.20);
	1094	border-radius: 999px;
	1095	padding: 3px 8px;
	1096	font-weight: 600;
	1097	letter-spacing: 0.03em;
	1098	white-space: nowrap;
	1099	}
	1100
	1101	/* ─── AI suggestion hint ─── */
	1102	.ai-suggestion-hint {
	1103	font-size: 11px;
	1104	color: var(--text-faint);
	1105	margin-top: 5px;
	1106	display: none;
	1107	}
	1108	.ai-suggestion-hint.visible { display: block; }
e26af57Claude	1109	`;
	1110
	1111	function IconBranch() {
	1112	return (
	1113	<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
	1114	<line x1="6" y1="3" x2="6" y2="15" />
	1115	<circle cx="18" cy="6" r="3" />
	1116	<circle cx="6" cy="18" r="3" />
	1117	<path d="M18 9a9 9 0 0 1-9 9" />
	1118	</svg>
	1119	);
	1120	}
	1121
0074234Claude	1122	// New file form
04f6b7fClaude	1123	editor.get("/:owner/:repo/new/:ref{.+$}", requireAuth, requireRepoAccess("write"), async (c) => {
0074234Claude	1124	const { owner, repo } = c.req.param();
	1125	const user = c.get("user")!;
	1126	const refAndPath = c.req.param("ref");
6f2809fClaude	1127	const aiEnabled = isAiAvailable();
0074234Claude	1128
	1129	// Parse ref — use first segment
	1130	const slashIdx = refAndPath.indexOf("/");
	1131	const ref = slashIdx === -1 ? refAndPath : refAndPath.slice(0, slashIdx);
	1132	const dirPath = slashIdx === -1 ? "" : refAndPath.slice(slashIdx + 1);
	1133
	1134	return c.html(
	1135	<Layout title={`New file — ${owner}/${repo}`} user={user}>
	1136	<RepoHeader owner={owner} repo={repo} />
	1137	<RepoNav owner={owner} repo={repo} active="code" />
e26af57Claude	1138	<div class="editor-wrap">
	1139	<header class="editor-head">
	1140	<div class="editor-eyebrow">
	1141	<span class="editor-eyebrow-dot" aria-hidden="true" />
	1142	Editor · New file
	1143	</div>
	1144	<h1 class="editor-title">
	1145	<span class="editor-title-grad">Create a new file.</span>
	1146	</h1>
	1147	<p class="editor-sub">
	1148	Pick a path, paste your content, and write a short commit
	1149	message. The commit lands directly on{" "}
	1150	<code style="font-size:12.5px">{ref}</code>.
	1151	</p>
	1152	</header>
	1153
	1154	<div class="editor-toolbar">
	1155	<div class="editor-path" title={dirPath ? `${dirPath}/…` : "Repository root"}>
	1156	<span class="editor-path-seg">{owner}/{repo}</span>
	1157	{dirPath && (
	1158	<>
	1159	<span class="editor-path-sep">/</span>
	1160	<span class="editor-path-seg">{dirPath}</span>
	1161	</>
	1162	)}
	1163	<span class="editor-path-sep">/</span>
	1164	<span class="editor-path-name">new file…</span>
	1165	</div>
6f2809fClaude	1166	<div style="display:flex;align-items:center;gap:8px">
	1167	{aiEnabled && (
	1168	<span class="ai-powered-badge" title="Claude-powered inline suggestions">
	1169	✨ AI-powered editor
	1170	</span>
	1171	)}
	1172	<span class="editor-branch-pill" title="Target branch">
	1173	<IconBranch />
	1174	{ref}
	1175	</span>
	1176	</div>
e26af57Claude	1177	</div>
	1178
	1179	<form
	1180	method="post"
	1181	action={`/${owner}/${repo}/new/${ref}`}
	1182	class="editor-card"
	1183	>
	1184	<div class="editor-body">
	1185	<input type="hidden" name="dir_path" value={dirPath} />
	1186	<div class="editor-field">
	1187	<label class="editor-label" for="editor-filename">File path</label>
	1188	<div class="editor-filename-row">
	1189	{dirPath && (
	1190	<span class="editor-filename-dir">{dirPath}/</span>
	1191	)}
	1192	<input
	1193	class="editor-input editor-input-mono"
	1194	id="editor-filename"
	1195	name="filename"
	1196	required
	1197	placeholder="filename.ts"
	1198	autocomplete="off"
	1199	aria-label="File path"
	1200	/>
	1201	</div>
	1202	</div>
	1203	<div class="editor-field">
	1204	<label class="editor-label" for="editor-content-new">Content</label>
3646bfeClaude	1205	{/* CodeMirror mounts here; falls back to textarea if JS/CDN unavailable */}
	1206	<div id="editor-cm-new" class="editor-cm-wrapper" />
e26af57Claude	1207	<textarea
	1208	class="editor-textarea"
	1209	id="editor-content-new"
	1210	name="content"
	1211	rows={20}
	1212	placeholder="Enter file content…"
	1213	spellcheck={false}
3646bfeClaude	1214	data-lang="plaintext"
e26af57Claude	1215	/>
	1216	</div>
	1217	<div class="editor-field" style="margin-bottom:0">
	1218	<label class="editor-label" for="commit-message-input">Commit message</label>
	1219	<input
	1220	class="editor-input"
	1221	id="commit-message-input"
	1222	name="message"
	1223	placeholder="Create new file"
0074234Claude	1224	required
e26af57Claude	1225	aria-label="Commit message"
0074234Claude	1226	/>
e26af57Claude	1227	</div>
	1228	</div>
	1229	<div class="editor-actions">
	1230	<button type="submit" class="editor-btn editor-btn-primary">
	1231	Commit new file
	1232	</button>
6f2809fClaude	1233	{aiEnabled && (
	1234	<button
	1235	type="button"
	1236	id="ai-explain-btn"
	1237	class="editor-btn editor-btn-ai"
	1238	title="Explain selected code (or full file) with Claude"
	1239	>
	1240	Explain code
	1241	</button>
	1242	)}
e26af57Claude	1243	<a href={`/${owner}/${repo}`} class="editor-btn editor-btn-ghost">
	1244	Cancel
	1245	</a>
	1246	</div>
3646bfeClaude	1247	<script
	1248	type="module"
	1249	dangerouslySetInnerHTML={{
	1250	__html: CODEMIRROR_INIT_SCRIPT({
	1251	textareaId: "editor-content-new",
	1252	wrapperId: "editor-cm-new",
	1253	lang: "plaintext",
	1254	}),
	1255	}}
	1256	/>
6f2809fClaude	1257	{aiEnabled && (
	1258	<script
	1259	dangerouslySetInnerHTML={{
	1260	__html:
	1261	`window.__aiEditorEnabled = true;\n` +
	1262	AI_EDITOR_SCRIPT({ lang: "plaintext", gateError: "" }),
	1263	}}
	1264	/>
	1265	)}
e26af57Claude	1266	</form>
	1267	</div>
	1268	<style dangerouslySetInnerHTML={{ __html: editorStyles }} />
0074234Claude	1269	</Layout>
	1270	);
	1271	});
	1272
	1273	// Create file via commit
04f6b7fClaude	1274	editor.post("/:owner/:repo/new/:ref", requireAuth, requireRepoAccess("write"), async (c) => {
0074234Claude	1275	const { owner, repo } = c.req.param();
	1276	const user = c.get("user")!;
	1277	const ref = c.req.param("ref");
	1278	const body = await c.req.parseBody();
	1279	const dirPath = String(body.dir_path \|\| "").trim();
	1280	const filename = String(body.filename \|\| "").trim();
	1281	const content = String(body.content \|\| "");
	1282	const message = String(body.message \|\| `Create ${filename}`).trim();
	1283
	1284	if (!filename) return c.redirect(`/${owner}/${repo}`);
	1285
	1286	const fullPath = dirPath ? `${dirPath}/${filename}` : filename;
	1287
	1288	// Use git hash-object + update-index + write-tree + commit-tree
	1289	const repoDir = getRepoPath(owner, repo);
	1290
	1291	const run = async (cmd: string[], cwd: string, stdin?: string) => {
	1292	const proc = Bun.spawn(cmd, {
	1293	cwd,
	1294	stdout: "pipe",
	1295	stderr: "pipe",
	1296	stdin: stdin !== undefined ? "pipe" : undefined,
	1297	});
	1298	if (stdin !== undefined && proc.stdin) {
	1299	proc.stdin.write(new TextEncoder().encode(stdin));
	1300	proc.stdin.end();
	1301	}
	1302	const stdout = await new Response(proc.stdout).text();
	1303	await proc.exited;
	1304	return stdout.trim();
	1305	};
	1306
	1307	// Hash the new file content
	1308	const blobSha = await run(
	1309	["git", "hash-object", "-w", "--stdin"],
	1310	repoDir,
	1311	content
	1312	);
	1313
	1314	// Read current tree
	1315	const currentTreeSha = await run(
	1316	["git", "rev-parse", `${ref}^{tree}`],
	1317	repoDir
	1318	);
	1319
	1320	// Read current tree and add new entry
	1321	const treeContent = await run(["git", "ls-tree", "-r", ref], repoDir);
	1322	const entries = treeContent
	1323	.split("\n")
	1324	.filter(Boolean)
	1325	.map((line) => line + "\n")
	1326	.join("");
	1327	const newEntry = `100644 blob ${blobSha}\t${fullPath}\n`;
	1328
	1329	const newTreeSha = await run(
	1330	["git", "mktree"],
	1331	repoDir,
	1332	entries + newEntry
	1333	);
	1334
	1335	// Get parent commit
	1336	const parentSha = await run(
	1337	["git", "rev-parse", ref],
	1338	repoDir
	1339	);
	1340
	1341	// Create commit
	1342	const env = {
	1343	GIT_AUTHOR_NAME: user.displayName \|\| user.username,
	1344	GIT_AUTHOR_EMAIL: user.email,
	1345	GIT_COMMITTER_NAME: user.displayName \|\| user.username,
	1346	GIT_COMMITTER_EMAIL: user.email,
	1347	};
	1348
	1349	const commitProc = Bun.spawn(
	1350	["git", "commit-tree", newTreeSha, "-p", parentSha, "-m", message],
	1351	{
	1352	cwd: repoDir,
	1353	stdout: "pipe",
	1354	stderr: "pipe",
	1355	env: { ...process.env, ...env },
	1356	}
	1357	);
	1358	const commitSha = (await new Response(commitProc.stdout).text()).trim();
	1359	await commitProc.exited;
	1360
	1361	// Update branch ref
	1362	await run(
	1363	["git", "update-ref", `refs/heads/${ref}`, commitSha],
	1364	repoDir
	1365	);
	1366
	1367	return c.redirect(`/${owner}/${repo}/blob/${ref}/${fullPath}`);
	1368	});
	1369
	1370	// Edit file form
04f6b7fClaude	1371	editor.get("/:owner/:repo/edit/:ref{.+$}", requireAuth, requireRepoAccess("write"), async (c) => {
0074234Claude	1372	const { owner, repo } = c.req.param();
	1373	const user = c.get("user")!;
	1374	const refAndPath = c.req.param("ref");
6f2809fClaude	1375	const aiEnabled = isAiAvailable();
0074234Claude	1376
	1377	// Parse ref/path
	1378	const slashIdx = refAndPath.indexOf("/");
	1379	if (slashIdx === -1) return c.text("Not found", 404);
	1380	const ref = refAndPath.slice(0, slashIdx);
	1381	const filePath = refAndPath.slice(slashIdx + 1);
	1382
	1383	const blob = await getBlob(owner, repo, ref, filePath);
	1384	if (!blob \|\| blob.isBinary) {
	1385	return c.html(
	1386	<Layout title="Cannot edit" user={user}>
bb0f894Claude	1387	<EmptyState title={blob?.isBinary ? "Cannot edit binary file" : "File not found"} />
0074234Claude	1388	</Layout>,
	1389	404
	1390	);
	1391	}
	1392
e26af57Claude	1393	const fileName = filePath.split("/").pop() \|\| filePath;
	1394	const dirParts = filePath.split("/").slice(0, -1);
6f2809fClaude	1395	const lang = detectEditorLang(filePath);
	1396
	1397	// GateTest error from query param (e.g. redirect after failed push gate)
	1398	const gateError = String(c.req.query("error") ?? "").slice(0, 500);
e26af57Claude	1399
0074234Claude	1400	return c.html(
	1401	<Layout title={`Editing ${filePath} — ${owner}/${repo}`} user={user}>
	1402	<RepoHeader owner={owner} repo={repo} />
	1403	<RepoNav owner={owner} repo={repo} active="code" />
e26af57Claude	1404	<div class="editor-wrap">
	1405	<header class="editor-head">
	1406	<div class="editor-eyebrow">
	1407	<span class="editor-eyebrow-dot" aria-hidden="true" />
	1408	Editor · Edit file
	1409	</div>
	1410	<h1 class="editor-title">
	1411	<span class="editor-title-grad">Edit{" "}</span>
	1412	<code style="font-family:var(--font-mono);font-size:0.82em;color:var(--text-strong);font-weight:700">{fileName}</code>
	1413	</h1>
	1414	<p class="editor-sub">
	1415	Save your changes as a commit on{" "}
	1416	<code style="font-size:12.5px">{ref}</code>. Write a clear
	1417	one-line message so reviewers can follow the history.
	1418	</p>
	1419	</header>
	1420
	1421	<div class="editor-toolbar">
	1422	<div class="editor-path" title={filePath}>
	1423	<a
	1424	href={`/${owner}/${repo}`}
	1425	class="editor-path-seg"
	1426	style="color:var(--text-muted);text-decoration:none"
	1427	>
	1428	{owner}/{repo}
	1429	</a>
	1430	{dirParts.map((seg, i) => {
	1431	const subPath = dirParts.slice(0, i + 1).join("/");
	1432	return (
	1433	<>
	1434	<span class="editor-path-sep">/</span>
	1435	<a
	1436	href={`/${owner}/${repo}/tree/${ref}/${subPath}`}
	1437	class="editor-path-seg"
	1438	style="text-decoration:none"
	1439	>
	1440	{seg}
	1441	</a>
	1442	</>
	1443	);
	1444	})}
	1445	<span class="editor-path-sep">/</span>
	1446	<span class="editor-path-name">{fileName}</span>
	1447	</div>
6f2809fClaude	1448	<div style="display:flex;align-items:center;gap:8px">
	1449	{aiEnabled && (
	1450	<span class="ai-powered-badge" title="Claude-powered inline suggestions, explain, and fix">
	1451	✨ AI-powered editor
	1452	</span>
	1453	)}
	1454	<span class="editor-branch-pill" title="Target branch">
	1455	<IconBranch />
	1456	{ref}
	1457	</span>
	1458	</div>
e26af57Claude	1459	</div>
	1460
6f2809fClaude	1461	{gateError && (
	1462	<div style="margin-bottom:var(--space-3);padding:10px 14px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.35);border-radius:10px;font-size:13px;color:#f59e0b;line-height:1.5">
	1463	<strong>GateTest error:</strong>{" "}{gateError}
	1464	</div>
	1465	)}
	1466
e26af57Claude	1467	<form
	1468	method="post"
	1469	action={`/${owner}/${repo}/edit/${ref}/${filePath}`}
	1470	class="editor-card"
	1471	>
	1472	<div class="editor-body">
	1473	<div class="editor-field">
	1474	<label class="editor-label" for="editor-content-edit">Content</label>
3646bfeClaude	1475	{/* CodeMirror mounts here; falls back to textarea if JS/CDN unavailable */}
	1476	<div id="editor-cm-edit" class="editor-cm-wrapper" />
e26af57Claude	1477	<textarea
	1478	class="editor-textarea"
	1479	id="editor-content-edit"
	1480	name="content"
	1481	rows={25}
	1482	spellcheck={false}
6f2809fClaude	1483	data-lang={lang}
e26af57Claude	1484	>{blob.content}</textarea>
	1485	</div>
	1486	<div class="editor-field" style="margin-bottom:0">
	1487	<label class="editor-label" for="commit-message-input">Commit message</label>
	1488	<input
	1489	class="editor-input"
	1490	id="commit-message-input"
	1491	name="message"
	1492	placeholder={`Update ${fileName}`}
	1493	required
	1494	aria-label="Commit message"
	1495	/>
	1496	</div>
	1497	</div>
	1498	<div class="editor-actions">
	1499	<button type="submit" class="editor-btn editor-btn-primary">
0074234Claude	1500	Commit changes
e26af57Claude	1501	</button>
c81b57cClaude	1502	<button
	1503	type="button"
	1504	id="ai-commit-msg-btn"
e26af57Claude	1505	class="editor-btn editor-btn-ai"
c81b57cClaude	1506	title="Generate a one-line commit message using Claude based on the diff"
	1507	>
e26af57Claude	1508	{"✨"} Suggest with AI
c81b57cClaude	1509	</button>
6f2809fClaude	1510	{aiEnabled && (
	1511	<button
	1512	type="button"
	1513	id="ai-explain-btn"
	1514	class="editor-btn editor-btn-ai"
	1515	title="Explain selected code (or full file) with Claude"
	1516	>
	1517	Explain code
	1518	</button>
	1519	)}
	1520	{aiEnabled && gateError && (
	1521	<button
	1522	type="button"
	1523	id="ai-fix-btn"
	1524	class="editor-btn editor-btn-ai"
	1525	title="Ask Claude to fix the GateTest error"
	1526	style="border-color:rgba(245,158,11,0.45);color:#f59e0b"
	1527	>
	1528	⚡ Fix error
	1529	</button>
	1530	)}
e26af57Claude	1531	<a
	1532	href={`/${owner}/${repo}/blob/${ref}/${filePath}`}
	1533	class="editor-btn editor-btn-ghost"
	1534	>
0074234Claude	1535	Cancel
e26af57Claude	1536	</a>
	1537	<span id="ai-commit-msg-status" class="editor-status" />
	1538	</div>
c81b57cClaude	1539	<script
	1540	dangerouslySetInnerHTML={{
	1541	__html: AI_COMMIT_MSG_SCRIPT({
	1542	endpoint: `/${owner}/${repo}/ai/commit-message`,
	1543	ref,
	1544	filePath,
	1545	}),
	1546	}}
	1547	/>
3646bfeClaude	1548	<script
	1549	type="module"
	1550	dangerouslySetInnerHTML={{
	1551	__html: CODEMIRROR_INIT_SCRIPT({
	1552	textareaId: "editor-content-edit",
	1553	wrapperId: "editor-cm-edit",
6f2809fClaude	1554	lang,
3646bfeClaude	1555	}),
	1556	}}
	1557	/>
6f2809fClaude	1558	{aiEnabled && (
	1559	<script
	1560	dangerouslySetInnerHTML={{
	1561	__html:
	1562	`window.__aiEditorEnabled = true;\n` +
	1563	AI_EDITOR_SCRIPT({ lang, gateError }),
	1564	}}
	1565	/>
	1566	)}
e26af57Claude	1567	</form>
	1568	</div>
	1569	<style dangerouslySetInnerHTML={{ __html: editorStyles }} />
0074234Claude	1570	</Layout>
	1571	);
	1572	});
	1573
c81b57cClaude	1574	// AI-suggested commit message — JSON endpoint driven by the editor button.
	1575	// Reads the on-disk blob at (ref, filePath), diffs against the submitted
	1576	// new content, and asks generateCommitMessage() for a one-liner. Returns
	1577	// {ok:true, message} on success, {ok:false, error} otherwise. Always 200.
	1578	editor.post(
	1579	"/:owner/:repo/ai/commit-message",
	1580	requireAuth,
	1581	requireRepoAccess("write"),
	1582	async (c) => {
	1583	const { owner, repo } = c.req.param();
	1584	if (!isAiAvailable()) {
	1585	return c.json({
	1586	ok: false,
	1587	error: "AI is not available — set ANTHROPIC_API_KEY.",
	1588	});
	1589	}
	1590	const body = await c.req.parseBody();
	1591	const ref = String(body.ref \|\| "").trim();
	1592	const filePath = String(body.filePath \|\| "").trim();
	1593	const newContent = String(body.content \|\| "");
	1594	if (!ref \|\| !filePath) {
	1595	return c.json({ ok: false, error: "ref + filePath required" });
	1596	}
	1597
	1598	let oldContent = "";
	1599	try {
	1600	const blob = await getBlob(owner, repo, ref, filePath);
	1601	oldContent = blob?.content \|\| "";
	1602	} catch {
	1603	oldContent = "";
	1604	}
	1605
	1606	if (oldContent === newContent) {
	1607	return c.json({
	1608	ok: false,
	1609	error: "No changes to summarise.",
	1610	});
	1611	}
	1612
	1613	// Build a minimal unified-diff-ish summary the AI helper can consume.
	1614	// generateCommitMessage was written for git diff text; we feed a
	1615	// header + truncated old/new sample so it has shape to summarise.
	1616	const truncate = (s: string) => (s.length > 4000 ? s.slice(0, 4000) + "\n…(truncated)" : s);
	1617	const diff =
	1618	`--- a/${filePath}\n+++ b/${filePath}\n` +
	1619	"## Old:\n" +
	1620	truncate(oldContent) +
	1621	"\n\n## New:\n" +
	1622	truncate(newContent);
	1623
	1624	let message = "";
	1625	try {
	1626	message = await generateCommitMessage(diff);
	1627	} catch (err) {
	1628	const msg = err instanceof Error ? err.message : "AI request failed.";
	1629	return c.json({ ok: false, error: msg });
	1630	}
	1631	if (!message.trim()) {
	1632	return c.json({
	1633	ok: false,
	1634	error: "AI returned an empty draft.",
	1635	});
	1636	}
	1637	// Cap to one line + 100 chars (commit-message convention).
	1638	const oneLine = message.split("\n")[0]!.trim();
	1639	const capped = oneLine.length > 100 ? oneLine.slice(0, 97) + "..." : oneLine;
c315551Claude	1640	// Emit audit event so L9 ai-hours-saved counters stay accurate.
	1641	const user = c.get("user");
	1642	if (user) {
	1643	void audit({
	1644	userId: user.id,
	1645	action: AI_AUDIT_ACTIONS.AI_COMMIT_MESSAGE,
	1646	targetType: "repository",
	1647	targetId: `${owner}/${repo}`,
	1648	metadata: { filePath },
	1649	}).catch(() => {});
	1650	}
c81b57cClaude	1651	return c.json({ ok: true, message: capped });
	1652	}
	1653	);
	1654
0074234Claude	1655	// Save edited file
04f6b7fClaude	1656	editor.post("/:owner/:repo/edit/:ref{.+$}", requireAuth, requireRepoAccess("write"), async (c) => {
0074234Claude	1657	const { owner, repo } = c.req.param();
	1658	const user = c.get("user")!;
	1659	const refAndPath = c.req.param("ref");
	1660
	1661	const slashIdx = refAndPath.indexOf("/");
	1662	if (slashIdx === -1) return c.redirect(`/${owner}/${repo}`);
	1663	const ref = refAndPath.slice(0, slashIdx);
	1664	const filePath = refAndPath.slice(slashIdx + 1);
	1665
	1666	const body = await c.req.parseBody();
	1667	const content = String(body.content \|\| "");
	1668	const message = String(
	1669	body.message \|\| `Update ${filePath.split("/").pop()}`
	1670	).trim();
	1671
	1672	const repoDir = getRepoPath(owner, repo);
	1673
	1674	const run = async (cmd: string[], cwd: string, stdin?: string) => {
	1675	const proc = Bun.spawn(cmd, {
	1676	cwd,
	1677	stdout: "pipe",
	1678	stderr: "pipe",
	1679	stdin: stdin !== undefined ? "pipe" : undefined,
	1680	});
	1681	if (stdin !== undefined && proc.stdin) {
	1682	proc.stdin.write(new TextEncoder().encode(stdin));
	1683	proc.stdin.end();
	1684	}
	1685	const stdout = await new Response(proc.stdout).text();
	1686	await proc.exited;
	1687	return stdout.trim();
	1688	};
	1689
	1690	// Hash new content
	1691	const blobSha = await run(
	1692	["git", "hash-object", "-w", "--stdin"],
	1693	repoDir,
	1694	content
	1695	);
	1696
	1697	// Read current tree, replace the file
	1698	const treeContent = await run(["git", "ls-tree", "-r", ref], repoDir);
	1699	const lines = treeContent.split("\n").filter(Boolean);
	1700	const updated = lines
	1701	.map((line) => {
	1702	const parts = line.match(/^(\d+) (\w+) ([0-9a-f]+)\t(.+)$/);
	1703	if (parts && parts[4] === filePath) {
	1704	return `${parts[1]} blob ${blobSha}\t${parts[4]}`;
	1705	}
	1706	return line;
	1707	})
	1708	.join("\n") + "\n";
	1709
	1710	const newTreeSha = await run(["git", "mktree"], repoDir, updated);
	1711	const parentSha = await run(["git", "rev-parse", ref], repoDir);
	1712
	1713	const env = {
	1714	GIT_AUTHOR_NAME: user.displayName \|\| user.username,
	1715	GIT_AUTHOR_EMAIL: user.email,
	1716	GIT_COMMITTER_NAME: user.displayName \|\| user.username,
	1717	GIT_COMMITTER_EMAIL: user.email,
	1718	};
	1719
	1720	const commitProc = Bun.spawn(
	1721	["git", "commit-tree", newTreeSha, "-p", parentSha, "-m", message],
	1722	{
	1723	cwd: repoDir,
	1724	stdout: "pipe",
	1725	stderr: "pipe",
	1726	env: { ...process.env, ...env },
	1727	}
	1728	);
	1729	const commitSha = (await new Response(commitProc.stdout).text()).trim();
	1730	await commitProc.exited;
	1731
	1732	await run(
	1733	["git", "update-ref", `refs/heads/${ref}`, commitSha],
	1734	repoDir
	1735	);
	1736
	1737	return c.redirect(`/${owner}/${repo}/blob/${ref}/${filePath}`);
	1738	});
	1739
	1740	export default editor;