mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-04-06 04:33:07 +00:00
Compare commits
1 Commits
feature/pu
...
c81ea768a7
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c81ea768a7 |
37
apps/server/src/lib/exec-utils.ts
Normal file
37
apps/server/src/lib/exec-utils.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Shared execution utilities
|
||||
*
|
||||
* Common helpers for spawning child processes with the correct environment.
|
||||
* Used by both route handlers and service layers.
|
||||
*/
|
||||
|
||||
import { createLogger } from '@automaker/utils';
|
||||
|
||||
const logger = createLogger('ExecUtils');
|
||||
|
||||
// Extended PATH to include common tool installation locations
|
||||
export const extendedPath = [
|
||||
process.env.PATH,
|
||||
'/opt/homebrew/bin',
|
||||
'/usr/local/bin',
|
||||
'/home/linuxbrew/.linuxbrew/bin',
|
||||
`${process.env.HOME}/.local/bin`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(':');
|
||||
|
||||
export const execEnv = {
|
||||
...process.env,
|
||||
PATH: extendedPath,
|
||||
};
|
||||
|
||||
export function getErrorMessage(error: unknown): string {
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
return String(error);
|
||||
}
|
||||
|
||||
export function logError(error: unknown, context: string): void {
|
||||
logger.error(`${context}:`, error);
|
||||
}
|
||||
@@ -24,7 +24,9 @@ export function createWriteHandler() {
|
||||
|
||||
// Ensure parent directory exists (symlink-safe)
|
||||
await mkdirSafe(path.dirname(path.resolve(filePath)));
|
||||
await secureFs.writeFile(filePath, content, 'utf-8');
|
||||
// Default content to empty string if undefined/null to prevent writing
|
||||
// "undefined" as literal text (e.g. when content field is missing from request)
|
||||
await secureFs.writeFile(filePath, content ?? '', 'utf-8');
|
||||
|
||||
res.json({ success: true });
|
||||
} catch (error) {
|
||||
|
||||
@@ -1,38 +1,14 @@
|
||||
/**
|
||||
* Common utilities for GitHub routes
|
||||
*
|
||||
* Re-exports shared utilities from lib/exec-utils so route consumers
|
||||
* can continue importing from this module unchanged.
|
||||
*/
|
||||
|
||||
import { exec } from 'child_process';
|
||||
import { promisify } from 'util';
|
||||
import { createLogger } from '@automaker/utils';
|
||||
|
||||
const logger = createLogger('GitHub');
|
||||
|
||||
export const execAsync = promisify(exec);
|
||||
|
||||
// Extended PATH to include common tool installation locations
|
||||
export const extendedPath = [
|
||||
process.env.PATH,
|
||||
'/opt/homebrew/bin',
|
||||
'/usr/local/bin',
|
||||
'/home/linuxbrew/.linuxbrew/bin',
|
||||
`${process.env.HOME}/.local/bin`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(':');
|
||||
|
||||
export const execEnv = {
|
||||
...process.env,
|
||||
PATH: extendedPath,
|
||||
};
|
||||
|
||||
export function getErrorMessage(error: unknown): string {
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
return String(error);
|
||||
}
|
||||
|
||||
export function logError(error: unknown, context: string): void {
|
||||
logger.error(`${context}:`, error);
|
||||
}
|
||||
// Re-export shared utilities from the canonical location
|
||||
export { extendedPath, execEnv, getErrorMessage, logError } from '../../../lib/exec-utils.js';
|
||||
|
||||
@@ -5,287 +5,26 @@
|
||||
* for a specific pull request, providing file path and line context.
|
||||
*/
|
||||
|
||||
import { spawn } from 'child_process';
|
||||
import type { Request, Response } from 'express';
|
||||
import { execAsync, execEnv, getErrorMessage, logError } from './common.js';
|
||||
import { getErrorMessage, logError } from './common.js';
|
||||
import { checkGitHubRemote } from './check-github-remote.js';
|
||||
import {
|
||||
fetchPRReviewComments,
|
||||
fetchReviewThreadResolvedStatus,
|
||||
type PRReviewComment,
|
||||
type ListPRReviewCommentsResult,
|
||||
} from '../../../services/pr-review-comments.service.js';
|
||||
|
||||
export interface PRReviewComment {
|
||||
id: string;
|
||||
author: string;
|
||||
avatarUrl?: string;
|
||||
body: string;
|
||||
path?: string;
|
||||
line?: number;
|
||||
createdAt: string;
|
||||
updatedAt?: string;
|
||||
isReviewComment: boolean;
|
||||
/** Whether this is an outdated review comment (code has changed since) */
|
||||
isOutdated?: boolean;
|
||||
/** Whether the review thread containing this comment has been resolved */
|
||||
isResolved?: boolean;
|
||||
/** The GraphQL node ID of the review thread (used for resolve/unresolve mutations) */
|
||||
threadId?: string;
|
||||
/** The diff hunk context for the comment */
|
||||
diffHunk?: string;
|
||||
/** The side of the diff (LEFT or RIGHT) */
|
||||
side?: string;
|
||||
/** The commit ID the comment was made on */
|
||||
commitId?: string;
|
||||
}
|
||||
|
||||
export interface ListPRReviewCommentsResult {
|
||||
success: boolean;
|
||||
comments?: PRReviewComment[];
|
||||
totalCount?: number;
|
||||
error?: string;
|
||||
}
|
||||
// Re-export types so existing callers continue to work
|
||||
export type { PRReviewComment, ListPRReviewCommentsResult };
|
||||
// Re-export service functions so existing callers continue to work
|
||||
export { fetchPRReviewComments, fetchReviewThreadResolvedStatus };
|
||||
|
||||
interface ListPRReviewCommentsRequest {
|
||||
projectPath: string;
|
||||
prNumber: number;
|
||||
}
|
||||
|
||||
/** Timeout for GitHub GraphQL API requests in milliseconds */
|
||||
const GITHUB_API_TIMEOUT_MS = 30000;
|
||||
|
||||
interface GraphQLReviewThreadComment {
|
||||
databaseId: number;
|
||||
}
|
||||
|
||||
interface GraphQLReviewThread {
|
||||
id: string;
|
||||
isResolved: boolean;
|
||||
comments: {
|
||||
nodes: GraphQLReviewThreadComment[];
|
||||
};
|
||||
}
|
||||
|
||||
interface GraphQLResponse {
|
||||
data?: {
|
||||
repository?: {
|
||||
pullRequest?: {
|
||||
reviewThreads?: {
|
||||
nodes: GraphQLReviewThread[];
|
||||
};
|
||||
} | null;
|
||||
};
|
||||
};
|
||||
errors?: Array<{ message: string }>;
|
||||
}
|
||||
|
||||
interface ReviewThreadInfo {
|
||||
isResolved: boolean;
|
||||
threadId: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch review thread resolved status and thread IDs using GitHub GraphQL API.
|
||||
* Returns a map of comment ID (string) -> { isResolved, threadId }.
|
||||
*/
|
||||
async function fetchReviewThreadResolvedStatus(
|
||||
projectPath: string,
|
||||
owner: string,
|
||||
repo: string,
|
||||
prNumber: number
|
||||
): Promise<Map<string, ReviewThreadInfo>> {
|
||||
const resolvedMap = new Map<string, ReviewThreadInfo>();
|
||||
|
||||
const query = `
|
||||
query GetPRReviewThreads(
|
||||
$owner: String!
|
||||
$repo: String!
|
||||
$prNumber: Int!
|
||||
) {
|
||||
repository(owner: $owner, name: $repo) {
|
||||
pullRequest(number: $prNumber) {
|
||||
reviewThreads(first: 100) {
|
||||
nodes {
|
||||
id
|
||||
isResolved
|
||||
comments(first: 100) {
|
||||
nodes {
|
||||
databaseId
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
const variables = { owner, repo, prNumber };
|
||||
const requestBody = JSON.stringify({ query, variables });
|
||||
|
||||
try {
|
||||
const response = await new Promise<GraphQLResponse>((resolve, reject) => {
|
||||
const gh = spawn('gh', ['api', 'graphql', '--input', '-'], {
|
||||
cwd: projectPath,
|
||||
env: execEnv,
|
||||
});
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
gh.kill();
|
||||
reject(new Error('GitHub GraphQL API request timed out'));
|
||||
}, GITHUB_API_TIMEOUT_MS);
|
||||
|
||||
let stdout = '';
|
||||
let stderr = '';
|
||||
gh.stdout.on('data', (data: Buffer) => (stdout += data.toString()));
|
||||
gh.stderr.on('data', (data: Buffer) => (stderr += data.toString()));
|
||||
|
||||
gh.on('close', (code) => {
|
||||
clearTimeout(timeoutId);
|
||||
if (code !== 0) {
|
||||
return reject(new Error(`gh process exited with code ${code}: ${stderr}`));
|
||||
}
|
||||
try {
|
||||
resolve(JSON.parse(stdout));
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
}
|
||||
});
|
||||
|
||||
gh.stdin.write(requestBody);
|
||||
gh.stdin.end();
|
||||
});
|
||||
|
||||
if (response.errors && response.errors.length > 0) {
|
||||
throw new Error(response.errors[0].message);
|
||||
}
|
||||
|
||||
const threads = response.data?.repository?.pullRequest?.reviewThreads?.nodes ?? [];
|
||||
for (const thread of threads) {
|
||||
const info: ReviewThreadInfo = { isResolved: thread.isResolved, threadId: thread.id };
|
||||
for (const comment of thread.comments.nodes) {
|
||||
resolvedMap.set(String(comment.databaseId), info);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// Log but don't fail — resolved status is best-effort
|
||||
logError(error, 'Failed to fetch PR review thread resolved status');
|
||||
}
|
||||
|
||||
return resolvedMap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch all comments for a PR (both regular and inline review comments)
|
||||
*/
|
||||
async function fetchPRReviewComments(
|
||||
projectPath: string,
|
||||
owner: string,
|
||||
repo: string,
|
||||
prNumber: number
|
||||
): Promise<PRReviewComment[]> {
|
||||
const allComments: PRReviewComment[] = [];
|
||||
|
||||
// Fetch review thread resolved status in parallel with comment fetching
|
||||
const resolvedStatusPromise = fetchReviewThreadResolvedStatus(projectPath, owner, repo, prNumber);
|
||||
|
||||
// 1. Fetch regular PR comments (issue-level comments)
|
||||
try {
|
||||
const { stdout: commentsOutput } = await execAsync(
|
||||
`gh pr view ${prNumber} -R ${owner}/${repo} --json comments`,
|
||||
{
|
||||
cwd: projectPath,
|
||||
env: execEnv,
|
||||
}
|
||||
);
|
||||
|
||||
const commentsData = JSON.parse(commentsOutput);
|
||||
const regularComments = (commentsData.comments || []).map(
|
||||
(c: {
|
||||
id: string;
|
||||
author: { login: string; avatarUrl?: string };
|
||||
body: string;
|
||||
createdAt: string;
|
||||
updatedAt?: string;
|
||||
}) => ({
|
||||
id: String(c.id),
|
||||
author: c.author?.login || 'unknown',
|
||||
avatarUrl: c.author?.avatarUrl,
|
||||
body: c.body,
|
||||
createdAt: c.createdAt,
|
||||
updatedAt: c.updatedAt,
|
||||
isReviewComment: false,
|
||||
isOutdated: false,
|
||||
// Regular PR comments are not part of review threads, so not resolvable
|
||||
isResolved: false,
|
||||
})
|
||||
);
|
||||
|
||||
allComments.push(...regularComments);
|
||||
} catch (error) {
|
||||
logError(error, 'Failed to fetch regular PR comments');
|
||||
}
|
||||
|
||||
// 2. Fetch inline review comments (code-level comments with file/line info)
|
||||
try {
|
||||
const reviewsEndpoint = `repos/${owner}/${repo}/pulls/${prNumber}/comments`;
|
||||
const { stdout: reviewsOutput } = await execAsync(`gh api ${reviewsEndpoint} --paginate`, {
|
||||
cwd: projectPath,
|
||||
env: execEnv,
|
||||
});
|
||||
|
||||
const reviewsData = JSON.parse(reviewsOutput);
|
||||
const reviewComments = (Array.isArray(reviewsData) ? reviewsData : []).map(
|
||||
(c: {
|
||||
id: number;
|
||||
user: { login: string; avatar_url?: string };
|
||||
body: string;
|
||||
path: string;
|
||||
line?: number;
|
||||
original_line?: number;
|
||||
created_at: string;
|
||||
updated_at?: string;
|
||||
diff_hunk?: string;
|
||||
side?: string;
|
||||
commit_id?: string;
|
||||
position?: number | null;
|
||||
}) => ({
|
||||
id: String(c.id),
|
||||
author: c.user?.login || 'unknown',
|
||||
avatarUrl: c.user?.avatar_url,
|
||||
body: c.body,
|
||||
path: c.path,
|
||||
line: c.line || c.original_line,
|
||||
createdAt: c.created_at,
|
||||
updatedAt: c.updated_at,
|
||||
isReviewComment: true,
|
||||
// A review comment is "outdated" if position is null (code has changed)
|
||||
isOutdated: c.position === null && !c.line,
|
||||
// isResolved will be filled in below from GraphQL data
|
||||
isResolved: false,
|
||||
diffHunk: c.diff_hunk,
|
||||
side: c.side,
|
||||
commitId: c.commit_id,
|
||||
})
|
||||
);
|
||||
|
||||
allComments.push(...reviewComments);
|
||||
} catch (error) {
|
||||
logError(error, 'Failed to fetch inline review comments');
|
||||
}
|
||||
|
||||
// Wait for resolved status and apply to inline review comments
|
||||
const resolvedMap = await resolvedStatusPromise;
|
||||
if (resolvedMap.size > 0) {
|
||||
for (const comment of allComments) {
|
||||
if (comment.isReviewComment && resolvedMap.has(comment.id)) {
|
||||
const info = resolvedMap.get(comment.id);
|
||||
comment.isResolved = info?.isResolved ?? false;
|
||||
comment.threadId = info?.threadId;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by createdAt descending (newest first)
|
||||
allComments.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
|
||||
return allComments;
|
||||
}
|
||||
|
||||
export function createListPRReviewCommentsHandler() {
|
||||
return async (req: Request, res: Response): Promise<void> => {
|
||||
try {
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
* identified by its GraphQL node ID (threadId).
|
||||
*/
|
||||
|
||||
import { spawn } from 'child_process';
|
||||
import type { Request, Response } from 'express';
|
||||
import { execEnv, getErrorMessage, logError } from './common.js';
|
||||
import { getErrorMessage, logError } from './common.js';
|
||||
import { checkGitHubRemote } from './check-github-remote.js';
|
||||
import { executeReviewThreadMutation } from '../../../services/github-pr-comment.service.js';
|
||||
|
||||
export interface ResolvePRCommentResult {
|
||||
success: boolean;
|
||||
@@ -22,91 +22,6 @@ interface ResolvePRCommentRequest {
|
||||
resolve: boolean;
|
||||
}
|
||||
|
||||
/** Timeout for GitHub GraphQL API requests in milliseconds */
|
||||
const GITHUB_API_TIMEOUT_MS = 30000;
|
||||
|
||||
interface GraphQLMutationResponse {
|
||||
data?: {
|
||||
resolveReviewThread?: {
|
||||
thread?: { isResolved: boolean; id: string } | null;
|
||||
} | null;
|
||||
unresolveReviewThread?: {
|
||||
thread?: { isResolved: boolean; id: string } | null;
|
||||
} | null;
|
||||
};
|
||||
errors?: Array<{ message: string }>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute a GraphQL mutation to resolve or unresolve a review thread.
|
||||
*/
|
||||
async function executeReviewThreadMutation(
|
||||
projectPath: string,
|
||||
threadId: string,
|
||||
resolve: boolean
|
||||
): Promise<{ isResolved: boolean }> {
|
||||
const mutationName = resolve ? 'resolveReviewThread' : 'unresolveReviewThread';
|
||||
|
||||
const mutation = `
|
||||
mutation ${resolve ? 'ResolveThread' : 'UnresolveThread'}($threadId: ID!) {
|
||||
${mutationName}(input: { threadId: $threadId }) {
|
||||
thread {
|
||||
id
|
||||
isResolved
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
const variables = { threadId };
|
||||
const requestBody = JSON.stringify({ query: mutation, variables });
|
||||
|
||||
const response = await new Promise<GraphQLMutationResponse>((res, rej) => {
|
||||
const gh = spawn('gh', ['api', 'graphql', '--input', '-'], {
|
||||
cwd: projectPath,
|
||||
env: execEnv,
|
||||
});
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
gh.kill();
|
||||
rej(new Error('GitHub GraphQL API request timed out'));
|
||||
}, GITHUB_API_TIMEOUT_MS);
|
||||
|
||||
let stdout = '';
|
||||
let stderr = '';
|
||||
gh.stdout.on('data', (data: Buffer) => (stdout += data.toString()));
|
||||
gh.stderr.on('data', (data: Buffer) => (stderr += data.toString()));
|
||||
|
||||
gh.on('close', (code) => {
|
||||
clearTimeout(timeoutId);
|
||||
if (code !== 0) {
|
||||
return rej(new Error(`gh process exited with code ${code}: ${stderr}`));
|
||||
}
|
||||
try {
|
||||
res(JSON.parse(stdout));
|
||||
} catch (e) {
|
||||
rej(e);
|
||||
}
|
||||
});
|
||||
|
||||
gh.stdin.write(requestBody);
|
||||
gh.stdin.end();
|
||||
});
|
||||
|
||||
if (response.errors && response.errors.length > 0) {
|
||||
throw new Error(response.errors[0].message);
|
||||
}
|
||||
|
||||
const threadData = resolve
|
||||
? response.data?.resolveReviewThread?.thread
|
||||
: response.data?.unresolveReviewThread?.thread;
|
||||
|
||||
if (!threadData) {
|
||||
throw new Error('No thread data returned from GitHub API');
|
||||
}
|
||||
|
||||
return { isResolved: threadData.isResolved };
|
||||
}
|
||||
|
||||
export function createResolvePRCommentHandler() {
|
||||
return async (req: Request, res: Response): Promise<void> => {
|
||||
try {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import type { Request, Response } from 'express';
|
||||
import { exec } from 'child_process';
|
||||
import { execFile } from 'child_process';
|
||||
import { promisify } from 'util';
|
||||
import { existsSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
@@ -20,7 +20,7 @@ import { getErrorMessage, logError } from '../common.js';
|
||||
import { getPhaseModelWithOverrides } from '../../../lib/settings-helpers.js';
|
||||
|
||||
const logger = createLogger('GenerateCommitMessage');
|
||||
const execAsync = promisify(exec);
|
||||
const execFileAsync = promisify(execFile);
|
||||
|
||||
/** Timeout for AI provider calls in milliseconds (30 seconds) */
|
||||
const AI_TIMEOUT_MS = 30_000;
|
||||
@@ -33,20 +33,39 @@ async function* withTimeout<T>(
|
||||
generator: AsyncIterable<T>,
|
||||
timeoutMs: number
|
||||
): AsyncGenerator<T, void, unknown> {
|
||||
let timerId: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
const timeoutPromise = new Promise<never>((_, reject) => {
|
||||
setTimeout(() => reject(new Error(`AI provider timed out after ${timeoutMs}ms`)), timeoutMs);
|
||||
timerId = setTimeout(
|
||||
() => reject(new Error(`AI provider timed out after ${timeoutMs}ms`)),
|
||||
timeoutMs
|
||||
);
|
||||
});
|
||||
|
||||
const iterator = generator[Symbol.asyncIterator]();
|
||||
let done = false;
|
||||
|
||||
while (!done) {
|
||||
const result = await Promise.race([iterator.next(), timeoutPromise]);
|
||||
if (result.done) {
|
||||
done = true;
|
||||
} else {
|
||||
yield result.value;
|
||||
try {
|
||||
while (!done) {
|
||||
const result = await Promise.race([iterator.next(), timeoutPromise]).catch(async (err) => {
|
||||
// Capture the original error, then attempt to close the iterator.
|
||||
// If iterator.return() throws, log it but rethrow the original error
|
||||
// so the timeout error (not the teardown error) is preserved.
|
||||
try {
|
||||
await iterator.return?.();
|
||||
} catch (teardownErr) {
|
||||
logger.warn('Error during iterator cleanup after timeout:', teardownErr);
|
||||
}
|
||||
throw err;
|
||||
});
|
||||
if (result.done) {
|
||||
done = true;
|
||||
} else {
|
||||
yield result.value;
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
clearTimeout(timerId);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,14 +136,14 @@ export function createGenerateCommitMessageHandler(
|
||||
let diff = '';
|
||||
try {
|
||||
// First try to get staged changes
|
||||
const { stdout: stagedDiff } = await execAsync('git diff --cached', {
|
||||
const { stdout: stagedDiff } = await execFileAsync('git', ['diff', '--cached'], {
|
||||
cwd: worktreePath,
|
||||
maxBuffer: 1024 * 1024 * 5, // 5MB buffer
|
||||
});
|
||||
|
||||
// If no staged changes, get unstaged changes
|
||||
if (!stagedDiff.trim()) {
|
||||
const { stdout: unstagedDiff } = await execAsync('git diff', {
|
||||
const { stdout: unstagedDiff } = await execFileAsync('git', ['diff'], {
|
||||
cwd: worktreePath,
|
||||
maxBuffer: 1024 * 1024 * 5, // 5MB buffer
|
||||
});
|
||||
@@ -222,7 +241,7 @@ export function createGenerateCommitMessageHandler(
|
||||
|
||||
const message = responseText.trim();
|
||||
|
||||
if (!message || message.trim().length === 0) {
|
||||
if (!message) {
|
||||
logger.warn('Received empty response from model');
|
||||
const response: GenerateCommitMessageErrorResponse = {
|
||||
success: false,
|
||||
|
||||
103
apps/server/src/services/github-pr-comment.service.ts
Normal file
103
apps/server/src/services/github-pr-comment.service.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
/**
|
||||
* GitHub PR Comment Service
|
||||
*
|
||||
* Domain logic for resolving/unresolving PR review threads via the
|
||||
* GitHub GraphQL API. Extracted from the route handler so the route
|
||||
* only deals with request/response plumbing.
|
||||
*/
|
||||
|
||||
import { spawn } from 'child_process';
|
||||
import { execEnv } from '../lib/exec-utils.js';
|
||||
|
||||
/** Timeout for GitHub GraphQL API requests in milliseconds */
|
||||
const GITHUB_API_TIMEOUT_MS = 30000;
|
||||
|
||||
interface GraphQLMutationResponse {
|
||||
data?: {
|
||||
resolveReviewThread?: {
|
||||
thread?: { isResolved: boolean; id: string } | null;
|
||||
} | null;
|
||||
unresolveReviewThread?: {
|
||||
thread?: { isResolved: boolean; id: string } | null;
|
||||
} | null;
|
||||
};
|
||||
errors?: Array<{ message: string }>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Execute a GraphQL mutation to resolve or unresolve a review thread.
|
||||
*/
|
||||
export async function executeReviewThreadMutation(
|
||||
projectPath: string,
|
||||
threadId: string,
|
||||
resolve: boolean
|
||||
): Promise<{ isResolved: boolean }> {
|
||||
const mutationName = resolve ? 'resolveReviewThread' : 'unresolveReviewThread';
|
||||
|
||||
const mutation = `
|
||||
mutation ${resolve ? 'ResolveThread' : 'UnresolveThread'}($threadId: ID!) {
|
||||
${mutationName}(input: { threadId: $threadId }) {
|
||||
thread {
|
||||
id
|
||||
isResolved
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
const variables = { threadId };
|
||||
const requestBody = JSON.stringify({ query: mutation, variables });
|
||||
|
||||
// Declare timeoutId before registering the error handler to avoid TDZ confusion
|
||||
let timeoutId: NodeJS.Timeout | undefined;
|
||||
|
||||
const response = await new Promise<GraphQLMutationResponse>((res, rej) => {
|
||||
const gh = spawn('gh', ['api', 'graphql', '--input', '-'], {
|
||||
cwd: projectPath,
|
||||
env: execEnv,
|
||||
});
|
||||
|
||||
gh.on('error', (err) => {
|
||||
clearTimeout(timeoutId);
|
||||
rej(err);
|
||||
});
|
||||
|
||||
timeoutId = setTimeout(() => {
|
||||
gh.kill();
|
||||
rej(new Error('GitHub GraphQL API request timed out'));
|
||||
}, GITHUB_API_TIMEOUT_MS);
|
||||
|
||||
let stdout = '';
|
||||
let stderr = '';
|
||||
gh.stdout.on('data', (data: Buffer) => (stdout += data.toString()));
|
||||
gh.stderr.on('data', (data: Buffer) => (stderr += data.toString()));
|
||||
|
||||
gh.on('close', (code) => {
|
||||
clearTimeout(timeoutId);
|
||||
if (code !== 0) {
|
||||
return rej(new Error(`gh process exited with code ${code}: ${stderr}`));
|
||||
}
|
||||
try {
|
||||
res(JSON.parse(stdout));
|
||||
} catch (e) {
|
||||
rej(e);
|
||||
}
|
||||
});
|
||||
|
||||
gh.stdin.write(requestBody);
|
||||
gh.stdin.end();
|
||||
});
|
||||
|
||||
if (response.errors && response.errors.length > 0) {
|
||||
throw new Error(response.errors[0].message);
|
||||
}
|
||||
|
||||
const threadData = resolve
|
||||
? response.data?.resolveReviewThread?.thread
|
||||
: response.data?.unresolveReviewThread?.thread;
|
||||
|
||||
if (!threadData) {
|
||||
throw new Error('No thread data returned from GitHub API');
|
||||
}
|
||||
|
||||
return { isResolved: threadData.isResolved };
|
||||
}
|
||||
338
apps/server/src/services/pr-review-comments.service.ts
Normal file
338
apps/server/src/services/pr-review-comments.service.ts
Normal file
@@ -0,0 +1,338 @@
|
||||
/**
|
||||
* PR Review Comments Service
|
||||
*
|
||||
* Domain logic for fetching PR review comments, enriching them with
|
||||
* resolved-thread status, and sorting. Extracted from the route handler
|
||||
* so the route only deals with request/response plumbing.
|
||||
*/
|
||||
|
||||
import { spawn, execFile } from 'child_process';
|
||||
import { promisify } from 'util';
|
||||
import { createLogger } from '@automaker/utils';
|
||||
import { execEnv, logError } from '../lib/exec-utils.js';
|
||||
|
||||
const execFileAsync = promisify(execFile);
|
||||
|
||||
// ── Public types (re-exported for callers) ──
|
||||
|
||||
export interface PRReviewComment {
|
||||
id: string;
|
||||
author: string;
|
||||
avatarUrl?: string;
|
||||
body: string;
|
||||
path?: string;
|
||||
line?: number;
|
||||
createdAt: string;
|
||||
updatedAt?: string;
|
||||
isReviewComment: boolean;
|
||||
/** Whether this is an outdated review comment (code has changed since) */
|
||||
isOutdated?: boolean;
|
||||
/** Whether the review thread containing this comment has been resolved */
|
||||
isResolved?: boolean;
|
||||
/** The GraphQL node ID of the review thread (used for resolve/unresolve mutations) */
|
||||
threadId?: string;
|
||||
/** The diff hunk context for the comment */
|
||||
diffHunk?: string;
|
||||
/** The side of the diff (LEFT or RIGHT) */
|
||||
side?: string;
|
||||
/** The commit ID the comment was made on */
|
||||
commitId?: string;
|
||||
}
|
||||
|
||||
export interface ListPRReviewCommentsResult {
|
||||
success: boolean;
|
||||
comments?: PRReviewComment[];
|
||||
totalCount?: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
// ── Internal types ──
|
||||
|
||||
/** Timeout for GitHub GraphQL API requests in milliseconds */
|
||||
const GITHUB_API_TIMEOUT_MS = 30000;
|
||||
|
||||
interface GraphQLReviewThreadComment {
|
||||
databaseId: number;
|
||||
}
|
||||
|
||||
interface GraphQLReviewThread {
|
||||
id: string;
|
||||
isResolved: boolean;
|
||||
comments: {
|
||||
pageInfo?: {
|
||||
hasNextPage: boolean;
|
||||
};
|
||||
nodes: GraphQLReviewThreadComment[];
|
||||
};
|
||||
}
|
||||
|
||||
interface GraphQLResponse {
|
||||
data?: {
|
||||
repository?: {
|
||||
pullRequest?: {
|
||||
reviewThreads?: {
|
||||
nodes: GraphQLReviewThread[];
|
||||
pageInfo?: {
|
||||
hasNextPage: boolean;
|
||||
};
|
||||
};
|
||||
} | null;
|
||||
};
|
||||
};
|
||||
errors?: Array<{ message: string }>;
|
||||
}
|
||||
|
||||
interface ReviewThreadInfo {
|
||||
isResolved: boolean;
|
||||
threadId: string;
|
||||
}
|
||||
|
||||
// ── Logger ──
|
||||
|
||||
const logger = createLogger('PRReviewCommentsService');
|
||||
|
||||
// ── Service functions ──
|
||||
|
||||
/**
|
||||
* Fetch review thread resolved status and thread IDs using GitHub GraphQL API.
|
||||
* Returns a map of comment ID (string) -> { isResolved, threadId }.
|
||||
*/
|
||||
export async function fetchReviewThreadResolvedStatus(
|
||||
projectPath: string,
|
||||
owner: string,
|
||||
repo: string,
|
||||
prNumber: number
|
||||
): Promise<Map<string, ReviewThreadInfo>> {
|
||||
const resolvedMap = new Map<string, ReviewThreadInfo>();
|
||||
|
||||
const query = `
|
||||
query GetPRReviewThreads(
|
||||
$owner: String!
|
||||
$repo: String!
|
||||
$prNumber: Int!
|
||||
) {
|
||||
repository(owner: $owner, name: $repo) {
|
||||
pullRequest(number: $prNumber) {
|
||||
reviewThreads(first: 100) {
|
||||
pageInfo {
|
||||
hasNextPage
|
||||
}
|
||||
nodes {
|
||||
id
|
||||
isResolved
|
||||
comments(first: 100) {
|
||||
pageInfo {
|
||||
hasNextPage
|
||||
}
|
||||
nodes {
|
||||
databaseId
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
const variables = { owner, repo, prNumber };
|
||||
const requestBody = JSON.stringify({ query, variables });
|
||||
|
||||
try {
|
||||
let timeoutId: NodeJS.Timeout | undefined;
|
||||
|
||||
const response = await new Promise<GraphQLResponse>((resolve, reject) => {
|
||||
const gh = spawn('gh', ['api', 'graphql', '--input', '-'], {
|
||||
cwd: projectPath,
|
||||
env: execEnv,
|
||||
});
|
||||
|
||||
gh.on('error', (err) => {
|
||||
clearTimeout(timeoutId);
|
||||
reject(err);
|
||||
});
|
||||
|
||||
timeoutId = setTimeout(() => {
|
||||
gh.kill();
|
||||
reject(new Error('GitHub GraphQL API request timed out'));
|
||||
}, GITHUB_API_TIMEOUT_MS);
|
||||
|
||||
let stdout = '';
|
||||
let stderr = '';
|
||||
gh.stdout.on('data', (data: Buffer) => (stdout += data.toString()));
|
||||
gh.stderr.on('data', (data: Buffer) => (stderr += data.toString()));
|
||||
|
||||
gh.on('close', (code) => {
|
||||
clearTimeout(timeoutId);
|
||||
if (code !== 0) {
|
||||
return reject(new Error(`gh process exited with code ${code}: ${stderr}`));
|
||||
}
|
||||
try {
|
||||
resolve(JSON.parse(stdout));
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
}
|
||||
});
|
||||
|
||||
gh.stdin.write(requestBody);
|
||||
gh.stdin.end();
|
||||
});
|
||||
|
||||
if (response.errors && response.errors.length > 0) {
|
||||
throw new Error(response.errors[0].message);
|
||||
}
|
||||
|
||||
// Check if reviewThreads data was truncated (more than 100 threads)
|
||||
const pageInfo = response.data?.repository?.pullRequest?.reviewThreads?.pageInfo;
|
||||
if (pageInfo?.hasNextPage) {
|
||||
logger.warn(
|
||||
`PR #${prNumber} in ${owner}/${repo} has more than 100 review threads — ` +
|
||||
'results are truncated. Some comments may be missing resolved status.'
|
||||
);
|
||||
// TODO: Implement cursor-based pagination by iterating with
|
||||
// reviewThreads.nodes pageInfo.endCursor across spawn calls.
|
||||
}
|
||||
|
||||
const threads = response.data?.repository?.pullRequest?.reviewThreads?.nodes ?? [];
|
||||
for (const thread of threads) {
|
||||
if (thread.comments.pageInfo?.hasNextPage) {
|
||||
logger.warn(
|
||||
`Review thread ${thread.id} in PR #${prNumber} has more than 100 comments — ` +
|
||||
'comment list is truncated. Some comments may be missing resolved status.'
|
||||
);
|
||||
}
|
||||
const info: ReviewThreadInfo = { isResolved: thread.isResolved, threadId: thread.id };
|
||||
for (const comment of thread.comments.nodes) {
|
||||
resolvedMap.set(String(comment.databaseId), info);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// Log but don't fail — resolved status is best-effort
|
||||
logError(error, 'Failed to fetch PR review thread resolved status');
|
||||
}
|
||||
|
||||
return resolvedMap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch all comments for a PR (both regular and inline review comments)
|
||||
*/
|
||||
export async function fetchPRReviewComments(
|
||||
projectPath: string,
|
||||
owner: string,
|
||||
repo: string,
|
||||
prNumber: number
|
||||
): Promise<PRReviewComment[]> {
|
||||
const allComments: PRReviewComment[] = [];
|
||||
|
||||
// Fetch review thread resolved status in parallel with comment fetching
|
||||
const resolvedStatusPromise = fetchReviewThreadResolvedStatus(projectPath, owner, repo, prNumber);
|
||||
|
||||
// 1. Fetch regular PR comments (issue-level comments)
|
||||
try {
|
||||
const { stdout: commentsOutput } = await execFileAsync(
|
||||
'gh',
|
||||
['pr', 'view', String(prNumber), '-R', `${owner}/${repo}`, '--json', 'comments'],
|
||||
{
|
||||
cwd: projectPath,
|
||||
env: execEnv,
|
||||
maxBuffer: 1024 * 1024 * 10, // 10MB buffer for large PRs
|
||||
timeout: GITHUB_API_TIMEOUT_MS,
|
||||
}
|
||||
);
|
||||
|
||||
const commentsData = JSON.parse(commentsOutput);
|
||||
const regularComments = (commentsData.comments || []).map(
|
||||
(c: {
|
||||
id: string;
|
||||
author: { login: string; avatarUrl?: string };
|
||||
body: string;
|
||||
createdAt: string;
|
||||
updatedAt?: string;
|
||||
}) => ({
|
||||
id: String(c.id),
|
||||
author: c.author?.login || 'unknown',
|
||||
avatarUrl: c.author?.avatarUrl,
|
||||
body: c.body,
|
||||
createdAt: c.createdAt,
|
||||
updatedAt: c.updatedAt,
|
||||
isReviewComment: false,
|
||||
isOutdated: false,
|
||||
// Regular PR comments are not part of review threads, so not resolvable
|
||||
isResolved: false,
|
||||
})
|
||||
);
|
||||
|
||||
allComments.push(...regularComments);
|
||||
} catch (error) {
|
||||
logError(error, 'Failed to fetch regular PR comments');
|
||||
}
|
||||
|
||||
// 2. Fetch inline review comments (code-level comments with file/line info)
|
||||
try {
|
||||
const reviewsEndpoint = `repos/${owner}/${repo}/pulls/${prNumber}/comments`;
|
||||
const { stdout: reviewsOutput } = await execFileAsync(
|
||||
'gh',
|
||||
['api', reviewsEndpoint, '--paginate', '--slurp', '--jq', 'add // []'],
|
||||
{
|
||||
cwd: projectPath,
|
||||
env: execEnv,
|
||||
maxBuffer: 1024 * 1024 * 10, // 10MB buffer for large PRs
|
||||
timeout: GITHUB_API_TIMEOUT_MS,
|
||||
}
|
||||
);
|
||||
|
||||
const reviewsData = JSON.parse(reviewsOutput);
|
||||
const reviewComments = (Array.isArray(reviewsData) ? reviewsData : []).map(
|
||||
(c: {
|
||||
id: number;
|
||||
user: { login: string; avatar_url?: string };
|
||||
body: string;
|
||||
path: string;
|
||||
line?: number;
|
||||
original_line?: number;
|
||||
created_at: string;
|
||||
updated_at?: string;
|
||||
diff_hunk?: string;
|
||||
side?: string;
|
||||
commit_id?: string;
|
||||
position?: number | null;
|
||||
}) => ({
|
||||
id: String(c.id),
|
||||
author: c.user?.login || 'unknown',
|
||||
avatarUrl: c.user?.avatar_url,
|
||||
body: c.body,
|
||||
path: c.path,
|
||||
line: c.line ?? c.original_line,
|
||||
createdAt: c.created_at,
|
||||
updatedAt: c.updated_at,
|
||||
isReviewComment: true,
|
||||
// A review comment is "outdated" if position is null (code has changed)
|
||||
isOutdated: c.position === null,
|
||||
// isResolved will be filled in below from GraphQL data
|
||||
isResolved: false,
|
||||
diffHunk: c.diff_hunk,
|
||||
side: c.side,
|
||||
commitId: c.commit_id,
|
||||
})
|
||||
);
|
||||
|
||||
allComments.push(...reviewComments);
|
||||
} catch (error) {
|
||||
logError(error, 'Failed to fetch inline review comments');
|
||||
}
|
||||
|
||||
// Wait for resolved status and apply to inline review comments
|
||||
const resolvedMap = await resolvedStatusPromise;
|
||||
for (const comment of allComments) {
|
||||
if (comment.isReviewComment && resolvedMap.has(comment.id)) {
|
||||
const info = resolvedMap.get(comment.id)!;
|
||||
comment.isResolved = info.isResolved;
|
||||
comment.threadId = info.threadId;
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by createdAt descending (newest first)
|
||||
allComments.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
|
||||
return allComments;
|
||||
}
|
||||
@@ -117,6 +117,8 @@ const eslintConfig = defineConfig([
|
||||
Electron: 'readonly',
|
||||
// Console
|
||||
console: 'readonly',
|
||||
// Structured clone (modern browser/Node API)
|
||||
structuredClone: 'readonly',
|
||||
// Vite defines
|
||||
__APP_VERSION__: 'readonly',
|
||||
__APP_BUILD_HASH__: 'readonly',
|
||||
|
||||
@@ -36,8 +36,7 @@ import { Switch } from '@/components/ui/switch';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { Markdown } from '@/components/ui/markdown';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { cn, modelSupportsThinking } from '@/lib/utils';
|
||||
import { cn, modelSupportsThinking, generateUUID } from '@/lib/utils';
|
||||
import { useAppStore } from '@/store/app-store';
|
||||
import { useGitHubPRReviewComments } from '@/hooks/queries';
|
||||
import { useCreateFeature, useResolveReviewThread } from '@/hooks/mutations';
|
||||
@@ -46,7 +45,8 @@ import type { PRReviewComment } from '@/lib/electron';
|
||||
import type { Feature } from '@/store/app-store';
|
||||
import type { PhaseModelEntry } from '@automaker/types';
|
||||
import { supportsReasoningEffort, isAdaptiveThinkingModel } from '@automaker/types';
|
||||
import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
|
||||
import { resolveModelString } from '@automaker/model-resolver';
|
||||
import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults';
|
||||
|
||||
// ============================================
|
||||
// Types
|
||||
@@ -75,7 +75,7 @@ interface PRCommentResolutionDialogProps {
|
||||
|
||||
/** Generate a feature ID */
|
||||
function generateFeatureId(): string {
|
||||
return `feature-${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
||||
return generateUUID();
|
||||
}
|
||||
|
||||
/** Format a date string for display */
|
||||
@@ -413,7 +413,7 @@ function CommentDetailDialog({ comment, open, onOpenChange }: CommentDetailDialo
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<ScrollArea className="flex-1 min-h-0 h-full -mx-6 px-6">
|
||||
<div className="flex-1 min-h-0 overflow-y-auto -mx-6 px-6">
|
||||
<div className="space-y-4 pb-2">
|
||||
{/* Author & metadata section */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
@@ -495,7 +495,7 @@ function CommentDetailDialog({ comment, open, onOpenChange }: CommentDetailDialo
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="mt-4">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
@@ -565,6 +565,9 @@ export function PRCommentResolutionDialog({
|
||||
>([]);
|
||||
const [detailComment, setDetailComment] = useState<PRReviewComment | null>(null);
|
||||
|
||||
// Per-thread resolving state - tracks which threads are currently being resolved/unresolved
|
||||
const [resolvingThreads, setResolvingThreads] = useState<Set<string>>(new Set());
|
||||
|
||||
// Model selection state
|
||||
const [modelEntry, setModelEntry] = useState<PhaseModelEntry>({ model: 'claude-sonnet' });
|
||||
|
||||
@@ -635,8 +638,8 @@ export function PRCommentResolutionDialog({
|
||||
const resolveThread = useResolveReviewThread(currentProject?.path ?? '', pr.number);
|
||||
|
||||
// Derived state
|
||||
const allSelected = comments.length > 0 && selectedIds.size === comments.length;
|
||||
const someSelected = selectedIds.size > 0 && selectedIds.size < comments.length;
|
||||
const allSelected = comments.length > 0 && comments.every((c) => selectedIds.has(c.id));
|
||||
const someSelected = selectedIds.size > 0 && !allSelected;
|
||||
const noneSelected = selectedIds.size === 0;
|
||||
|
||||
// ============================================
|
||||
@@ -658,7 +661,24 @@ export function PRCommentResolutionDialog({
|
||||
const handleResolveComment = useCallback(
|
||||
(comment: PRReviewComment, resolve: boolean) => {
|
||||
if (!comment.threadId) return;
|
||||
resolveThread.mutate({ threadId: comment.threadId, resolve });
|
||||
const threadId = comment.threadId;
|
||||
setResolvingThreads((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(threadId);
|
||||
return next;
|
||||
});
|
||||
resolveThread.mutate(
|
||||
{ threadId, resolve },
|
||||
{
|
||||
onSettled: () => {
|
||||
setResolvingThreads((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(threadId);
|
||||
return next;
|
||||
});
|
||||
},
|
||||
}
|
||||
);
|
||||
},
|
||||
[resolveThread]
|
||||
);
|
||||
@@ -703,7 +723,7 @@ export function PRCommentResolutionDialog({
|
||||
const selectedComments = comments.filter((c) => selectedIds.has(c.id));
|
||||
|
||||
// Resolve model settings from the current model entry
|
||||
const selectedModel = modelEntry.model;
|
||||
const selectedModel = resolveModelString(modelEntry.model);
|
||||
const normalizedThinking = modelSupportsThinking(selectedModel)
|
||||
? modelEntry.thinkingLevel || 'none'
|
||||
: 'none';
|
||||
@@ -810,6 +830,7 @@ export function PRCommentResolutionDialog({
|
||||
setShowResolved(false);
|
||||
setCreationErrors([]);
|
||||
setDetailComment(null);
|
||||
setResolvingThreads(new Set());
|
||||
setModelEntry(effectiveDefaultFeatureModel);
|
||||
}
|
||||
onOpenChange(newOpen);
|
||||
@@ -1008,7 +1029,9 @@ export function PRCommentResolutionDialog({
|
||||
onToggle={() => handleToggleComment(comment.id)}
|
||||
onExpandDetail={() => setDetailComment(comment)}
|
||||
onResolve={handleResolveComment}
|
||||
isResolvingThread={resolveThread.isPending}
|
||||
isResolvingThread={
|
||||
!!comment.threadId && resolvingThreads.has(comment.threadId)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -108,7 +108,9 @@ export function useProjectPicker({
|
||||
setIsProjectPickerOpen(false);
|
||||
} else if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
selectHighlightedProject();
|
||||
selectHighlightedProject().catch(() => {
|
||||
/* Error already logged upstream */
|
||||
});
|
||||
} else if (event.key === 'ArrowDown') {
|
||||
event.preventDefault();
|
||||
setSelectedProjectIndex((prev) => (prev < filteredProjects.length - 1 ? prev + 1 : prev));
|
||||
|
||||
131
apps/ui/src/components/ui/app-error-boundary.tsx
Normal file
131
apps/ui/src/components/ui/app-error-boundary.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import { Component, type ReactNode, type ErrorInfo } from 'react';
|
||||
import { createLogger } from '@automaker/utils/logger';
|
||||
|
||||
const logger = createLogger('AppErrorBoundary');
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Root-level error boundary for the entire application.
|
||||
*
|
||||
* Catches uncaught React errors that would otherwise show TanStack Router's
|
||||
* default "Something went wrong!" screen with a raw error message.
|
||||
*
|
||||
* Provides a user-friendly error screen with a reload button to recover.
|
||||
* This is especially important for transient errors during initial app load
|
||||
* (e.g., race conditions during auth/hydration on fresh browser sessions).
|
||||
*/
|
||||
export class AppErrorBoundary extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = { hasError: false, error: null };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
logger.error('Uncaught application error:', {
|
||||
error: error.message,
|
||||
stack: error.stack,
|
||||
componentStack: errorInfo.componentStack,
|
||||
});
|
||||
}
|
||||
|
||||
handleReload = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div
|
||||
className="flex h-screen w-full flex-col items-center justify-center gap-6 bg-background p-6 text-foreground"
|
||||
data-testid="app-error-boundary"
|
||||
>
|
||||
{/* Logo matching the app shell in index.html */}
|
||||
<svg
|
||||
className="h-14 w-14 opacity-90"
|
||||
viewBox="0 0 256 256"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect
|
||||
className="fill-foreground/[0.08]"
|
||||
x="16"
|
||||
y="16"
|
||||
width="224"
|
||||
height="224"
|
||||
rx="56"
|
||||
/>
|
||||
<g
|
||||
className="stroke-foreground/70"
|
||||
fill="none"
|
||||
strokeWidth="20"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M92 92 L52 128 L92 164" />
|
||||
<path d="M144 72 L116 184" />
|
||||
<path d="M164 92 L204 128 L164 164" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div className="text-center space-y-2">
|
||||
<h1 className="text-xl font-semibold">Something went wrong</h1>
|
||||
<p className="text-sm text-muted-foreground max-w-md">
|
||||
The application encountered an unexpected error. This is usually temporary and can be
|
||||
resolved by reloading the page.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={this.handleReload}
|
||||
className="inline-flex items-center gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<svg
|
||||
className="h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
|
||||
<path d="M3 3v5h5" />
|
||||
<path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
|
||||
<path d="M16 21h5v-5" />
|
||||
</svg>
|
||||
Reload Page
|
||||
</button>
|
||||
|
||||
{/* Collapsible technical details for debugging */}
|
||||
{this.state.error && (
|
||||
<details className="text-xs text-muted-foreground max-w-lg w-full">
|
||||
<summary className="cursor-pointer hover:text-foreground text-center">
|
||||
Technical details
|
||||
</summary>
|
||||
<pre className="mt-2 p-3 bg-muted/50 rounded-md text-left overflow-auto max-h-32 border border-border">
|
||||
{this.state.error.stack || this.state.error.message}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@@ -33,11 +33,11 @@ import { getHttpApiClient } from '@/lib/http-api-client';
|
||||
import type { BacklogPlanResult, FeatureStatusWithPipeline } from '@automaker/types';
|
||||
import { pathsEqual } from '@/lib/utils';
|
||||
import { toast } from 'sonner';
|
||||
import { BoardBackgroundModal } from '@/components/dialogs/board-background-modal';
|
||||
import {
|
||||
BoardBackgroundModal,
|
||||
PRCommentResolutionDialog,
|
||||
type PRCommentResolutionPRInfo,
|
||||
} from '@/components/dialogs/pr-comment-resolution-dialog';
|
||||
} from '@/components/dialogs';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { useAutoMode } from '@/hooks/use-auto-mode';
|
||||
import { resolveModelString } from '@automaker/model-resolver';
|
||||
@@ -1031,7 +1031,7 @@ export function BoardView() {
|
||||
images: [],
|
||||
imagePaths: [],
|
||||
skipTests: defaultSkipTests,
|
||||
model: 'opus' as const,
|
||||
model: resolveModelString('opus'),
|
||||
thinkingLevel: 'none' as const,
|
||||
branchName: conflictInfo.targetBranch,
|
||||
workMode: 'custom' as const, // Use the target branch where conflicts need to be resolved
|
||||
|
||||
@@ -227,9 +227,9 @@ export function AddFeatureDialog({
|
||||
|
||||
if (justOpened) {
|
||||
// Initialize with prefilled values if provided, otherwise use defaults
|
||||
setTitle(prefilledTitle || '');
|
||||
setDescription(prefilledDescription || '');
|
||||
setCategory(prefilledCategory || '');
|
||||
setTitle(prefilledTitle ?? '');
|
||||
setDescription(prefilledDescription ?? '');
|
||||
setCategory(prefilledCategory ?? '');
|
||||
|
||||
setSkipTests(defaultSkipTests);
|
||||
// When a non-main worktree is selected, use its branch name for custom mode
|
||||
|
||||
@@ -299,9 +299,13 @@ export function CreatePRDialog({
|
||||
const api = getHttpApiClient();
|
||||
// Resolve the display name to the actual branch name for the API
|
||||
const resolvedRef = branchFullRefMap.get(baseBranch) || baseBranch;
|
||||
const branchNameForApi = resolvedRef.includes('/')
|
||||
? resolvedRef.substring(resolvedRef.indexOf('/') + 1)
|
||||
: resolvedRef;
|
||||
// Only strip the remote prefix if the resolved ref differs from the original
|
||||
// (indicating it was resolved from a full ref like "origin/main").
|
||||
// This preserves local branch names that contain slashes (e.g. "release/1.0").
|
||||
const branchNameForApi =
|
||||
resolvedRef !== baseBranch && resolvedRef.includes('/')
|
||||
? resolvedRef.substring(resolvedRef.indexOf('/') + 1)
|
||||
: resolvedRef;
|
||||
const result = await api.worktree.generatePRDescription(worktree.path, branchNameForApi);
|
||||
|
||||
if (result.success) {
|
||||
@@ -344,11 +348,13 @@ export function CreatePRDialog({
|
||||
// since the backend handles branch resolution. However, if the full ref is
|
||||
// available, we can use it for more precise targeting.
|
||||
const resolvedBaseBranch = branchFullRefMap.get(baseBranch) || baseBranch;
|
||||
// Strip the remote prefix from the resolved ref for the API call
|
||||
// (e.g. "origin/main" → "main") since the backend expects the branch name only
|
||||
const baseBranchForApi = resolvedBaseBranch.includes('/')
|
||||
? resolvedBaseBranch.substring(resolvedBaseBranch.indexOf('/') + 1)
|
||||
: resolvedBaseBranch;
|
||||
// Only strip the remote prefix if the resolved ref differs from the original
|
||||
// (indicating it was resolved from a full ref like "origin/main").
|
||||
// This preserves local branch names that contain slashes (e.g. "release/1.0").
|
||||
const baseBranchForApi =
|
||||
resolvedBaseBranch !== baseBranch && resolvedBaseBranch.includes('/')
|
||||
? resolvedBaseBranch.substring(resolvedBaseBranch.indexOf('/') + 1)
|
||||
: resolvedBaseBranch;
|
||||
|
||||
const result = await api.worktree.createPR(worktree.path, {
|
||||
projectPath: projectPath || undefined,
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useMemo } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -251,6 +252,21 @@ export function WorktreeActionsDropdown({
|
||||
// Determine if the destructive/bottom section has any visible items
|
||||
const hasDestructiveSectionContent = worktree.hasChanges || !worktree.isMain;
|
||||
|
||||
// Pre-compute PR info for the PR submenu (avoids an IIFE in JSX)
|
||||
const prInfo = useMemo<PRInfo | null>(() => {
|
||||
if (!showPRInfo || !worktree.pr) return null;
|
||||
return {
|
||||
number: worktree.pr.number,
|
||||
title: worktree.pr.title,
|
||||
url: worktree.pr.url,
|
||||
state: worktree.pr.state,
|
||||
author: '',
|
||||
body: '',
|
||||
comments: [],
|
||||
reviewComments: [],
|
||||
};
|
||||
}, [showPRInfo, worktree.pr]);
|
||||
|
||||
return (
|
||||
<DropdownMenu onOpenChange={onOpenChange}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
@@ -371,16 +387,18 @@ export function WorktreeActionsDropdown({
|
||||
? 'Dev Server Starting...'
|
||||
: `Dev Server Running (:${devServerInfo?.port})`}
|
||||
</DropdownMenuLabel>
|
||||
{devServerInfo?.urlDetected !== false && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => onOpenDevServerUrl(worktree)}
|
||||
className="text-xs"
|
||||
aria-label={`Open dev server on port ${devServerInfo?.port} in browser`}
|
||||
>
|
||||
<Globe className="w-3.5 h-3.5 mr-2" aria-hidden="true" />
|
||||
Open in Browser
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{devServerInfo != null &&
|
||||
devServerInfo.port != null &&
|
||||
devServerInfo.urlDetected !== false && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => onOpenDevServerUrl(worktree)}
|
||||
className="text-xs"
|
||||
aria-label={`Open dev server on port ${devServerInfo.port} in browser`}
|
||||
>
|
||||
<Globe className="w-3.5 h-3.5 mr-2" aria-hidden="true" />
|
||||
Open in Browser
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem onClick={() => onViewDevServerLogs(worktree)} className="text-xs">
|
||||
<ScrollText className="w-3.5 h-3.5 mr-2" />
|
||||
View Logs
|
||||
@@ -592,7 +610,7 @@ export function WorktreeActionsDropdown({
|
||||
Scripts
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent className="w-52">
|
||||
{/* Re-run Init Script - always shown for non-main worktrees, disabled when no init script configured */}
|
||||
{/* Re-run Init Script - always shown for non-main worktrees, disabled when no init script configured or no handler */}
|
||||
{!worktree.isMain && (
|
||||
<>
|
||||
<DropdownMenuItem
|
||||
@@ -613,6 +631,7 @@ export function WorktreeActionsDropdown({
|
||||
key={script.id}
|
||||
onClick={() => onRunTerminalScript?.(worktree, script.command)}
|
||||
className="text-xs"
|
||||
disabled={!onRunTerminalScript}
|
||||
>
|
||||
<Play className="w-3.5 h-3.5 mr-2 shrink-0" />
|
||||
<span className="truncate">{script.name}</span>
|
||||
@@ -625,7 +644,11 @@ export function WorktreeActionsDropdown({
|
||||
)}
|
||||
{/* Divider before Edit Commands & Scripts */}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => onEditScripts?.()} className="text-xs">
|
||||
<DropdownMenuItem
|
||||
onClick={() => onEditScripts?.()}
|
||||
className="text-xs"
|
||||
disabled={!onEditScripts}
|
||||
>
|
||||
<Settings2 className="w-3.5 h-3.5 mr-2" />
|
||||
Edit Commands & Scripts
|
||||
</DropdownMenuItem>
|
||||
@@ -939,32 +962,23 @@ export function WorktreeActionsDropdown({
|
||||
- worktree.hasChanges: View Changes action is available
|
||||
- (worktree.hasChanges && onStashChanges): Create Stash action is possible
|
||||
- onViewStashes: viewing existing stashes is possible */}
|
||||
{(worktree.hasChanges || onViewStashes) && (
|
||||
{/* View Changes split button - show submenu only when there are non-duplicate sub-actions */}
|
||||
{worktree.hasChanges && (onStashChanges || onViewStashes) ? (
|
||||
<DropdownMenuSub>
|
||||
<div className="flex items-center">
|
||||
{/* Main clickable area - view changes (primary action) */}
|
||||
{worktree.hasChanges ? (
|
||||
<DropdownMenuItem
|
||||
onClick={() => onViewChanges(worktree)}
|
||||
className="text-xs flex-1 pr-0 rounded-r-none"
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5 mr-2" />
|
||||
View Changes
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
<DropdownMenuItem
|
||||
onClick={() => onViewStashes!(worktree)}
|
||||
className="text-xs flex-1 pr-0 rounded-r-none"
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5 mr-2" />
|
||||
View Stashes
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem
|
||||
onClick={() => onViewChanges(worktree)}
|
||||
className="text-xs flex-1 pr-0 rounded-r-none"
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5 mr-2" />
|
||||
View Changes
|
||||
</DropdownMenuItem>
|
||||
{/* Chevron trigger for submenu with stash options */}
|
||||
<DropdownMenuSubTrigger className="text-xs px-1 rounded-l-none border-l border-border/30 h-8" />
|
||||
</div>
|
||||
<DropdownMenuSubContent>
|
||||
{worktree.hasChanges && onStashChanges && (
|
||||
{onStashChanges && (
|
||||
<TooltipWrapper
|
||||
showTooltip={!isGitOpsAvailable}
|
||||
tooltipContent={gitOpsDisabledReason}
|
||||
@@ -993,7 +1007,17 @@ export function WorktreeActionsDropdown({
|
||||
)}
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
)}
|
||||
) : worktree.hasChanges ? (
|
||||
<DropdownMenuItem onClick={() => onViewChanges(worktree)} className="text-xs">
|
||||
<Eye className="w-3.5 h-3.5 mr-2" />
|
||||
View Changes
|
||||
</DropdownMenuItem>
|
||||
) : onViewStashes ? (
|
||||
<DropdownMenuItem onClick={() => onViewStashes(worktree)} className="text-xs">
|
||||
<Eye className="w-3.5 h-3.5 mr-2" />
|
||||
View Stashes
|
||||
</DropdownMenuItem>
|
||||
) : null}
|
||||
{worktree.hasChanges && (
|
||||
<TooltipWrapper
|
||||
showTooltip={!!gitOpsDisabledReason}
|
||||
@@ -1032,7 +1056,7 @@ export function WorktreeActionsDropdown({
|
||||
</TooltipWrapper>
|
||||
)}
|
||||
{/* Show PR info with Address Comments in sub-menu if PR exists */}
|
||||
{showPRInfo && worktree.pr && (
|
||||
{prInfo && worktree.pr && (
|
||||
<DropdownMenuSub>
|
||||
<div className="flex items-center">
|
||||
{/* Main clickable area - opens PR in browser */}
|
||||
@@ -1044,7 +1068,16 @@ export function WorktreeActionsDropdown({
|
||||
>
|
||||
<GitPullRequest className="w-3 h-3 mr-2" />
|
||||
PR #{worktree.pr.number}
|
||||
<span className="ml-auto mr-1 text-[10px] bg-green-500/20 text-green-600 px-1.5 py-0.5 rounded uppercase">
|
||||
<span
|
||||
className={cn(
|
||||
'ml-auto mr-1 text-[10px] px-1.5 py-0.5 rounded uppercase',
|
||||
worktree.pr.state === 'MERGED'
|
||||
? 'bg-purple-500/20 text-purple-600'
|
||||
: worktree.pr.state === 'CLOSED'
|
||||
? 'bg-gray-500/20 text-gray-500'
|
||||
: 'bg-green-500/20 text-green-600'
|
||||
)}
|
||||
>
|
||||
{worktree.pr.state}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
@@ -1053,40 +1086,14 @@ export function WorktreeActionsDropdown({
|
||||
</div>
|
||||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
// Convert stored PR info to the full PRInfo format for the handler
|
||||
// The handler will fetch full comments from GitHub
|
||||
const prInfo: PRInfo = {
|
||||
number: worktree.pr!.number,
|
||||
title: worktree.pr!.title,
|
||||
url: worktree.pr!.url,
|
||||
state: worktree.pr!.state,
|
||||
author: '', // Will be fetched
|
||||
body: '', // Will be fetched
|
||||
comments: [],
|
||||
reviewComments: [],
|
||||
};
|
||||
onAddressPRComments(worktree, prInfo);
|
||||
}}
|
||||
onClick={() => onAddressPRComments(worktree, prInfo)}
|
||||
className="text-xs text-blue-500 focus:text-blue-600"
|
||||
>
|
||||
<MessageSquare className="w-3.5 h-3.5 mr-2" />
|
||||
Manage PR Comments
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
const prInfo: PRInfo = {
|
||||
number: worktree.pr!.number,
|
||||
title: worktree.pr!.title,
|
||||
url: worktree.pr!.url,
|
||||
state: worktree.pr!.state,
|
||||
author: '',
|
||||
body: '',
|
||||
comments: [],
|
||||
reviewComments: [],
|
||||
};
|
||||
onAutoAddressPRComments(worktree, prInfo);
|
||||
}}
|
||||
onClick={() => onAutoAddressPRComments(worktree, prInfo)}
|
||||
className="text-xs text-blue-500 focus:text-blue-600"
|
||||
>
|
||||
<Zap className="w-3.5 h-3.5 mr-2" />
|
||||
|
||||
@@ -144,7 +144,7 @@ export function WorktreeDropdownItem({
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Dev server indicator - only shown when port is confirmed detected */}
|
||||
{/* Dev server indicator - hidden when URL detection explicitly failed */}
|
||||
{devServerRunning && devServerInfo?.urlDetected !== false && (
|
||||
<span
|
||||
className="inline-flex items-center justify-center h-4 w-4 text-green-500"
|
||||
|
||||
@@ -87,8 +87,17 @@ export function useWorktrees({
|
||||
}
|
||||
}, [worktrees, projectPath, setCurrentWorktree]);
|
||||
|
||||
const currentWorktreePath = currentWorktree?.path ?? null;
|
||||
|
||||
const handleSelectWorktree = useCallback(
|
||||
(worktree: WorktreeInfo) => {
|
||||
// Skip invalidation when re-selecting the already-active worktree
|
||||
const isSameWorktree = worktree.isMain
|
||||
? currentWorktreePath === null
|
||||
: pathsEqual(worktree.path, currentWorktreePath ?? '');
|
||||
|
||||
if (isSameWorktree) return;
|
||||
|
||||
setCurrentWorktree(projectPath, worktree.isMain ? null : worktree.path, worktree.branch);
|
||||
|
||||
// Invalidate feature queries when switching worktrees to ensure fresh data.
|
||||
@@ -99,7 +108,7 @@ export function useWorktrees({
|
||||
queryKey: queryKeys.features.all(projectPath),
|
||||
});
|
||||
},
|
||||
[projectPath, setCurrentWorktree, queryClient]
|
||||
[projectPath, setCurrentWorktree, queryClient, currentWorktreePath]
|
||||
);
|
||||
|
||||
// fetchWorktrees for backward compatibility - now just triggers a refetch
|
||||
@@ -118,7 +127,6 @@ export function useWorktrees({
|
||||
[projectPath, queryClient, refetch]
|
||||
);
|
||||
|
||||
const currentWorktreePath = currentWorktree?.path ?? null;
|
||||
const selectedWorktree = currentWorktreePath
|
||||
? worktrees.find((w) => pathsEqual(w.path, currentWorktreePath))
|
||||
: worktrees.find((w) => w.isMain);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { X, Circle, MoreHorizontal } from 'lucide-react';
|
||||
import { X, Circle, MoreHorizontal, Save } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { EditorTab } from '../use-file-editor-store';
|
||||
import {
|
||||
@@ -14,6 +14,12 @@ interface EditorTabsProps {
|
||||
onTabSelect: (tabId: string) => void;
|
||||
onTabClose: (tabId: string) => void;
|
||||
onCloseAll: () => void;
|
||||
/** Called when the save button is clicked (mobile only) */
|
||||
onSave?: () => void;
|
||||
/** Whether there are unsaved changes (controls enabled state of save button) */
|
||||
isDirty?: boolean;
|
||||
/** Whether to show the save button in the tab bar (intended for mobile) */
|
||||
showSaveButton?: boolean;
|
||||
}
|
||||
|
||||
/** Get a file icon color based on extension */
|
||||
@@ -74,6 +80,9 @@ export function EditorTabs({
|
||||
onTabSelect,
|
||||
onTabClose,
|
||||
onCloseAll,
|
||||
onSave,
|
||||
isDirty,
|
||||
showSaveButton,
|
||||
}: EditorTabsProps) {
|
||||
if (tabs.length === 0) return null;
|
||||
|
||||
@@ -128,8 +137,26 @@ export function EditorTabs({
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Tab actions dropdown (close all, etc.) */}
|
||||
<div className="ml-auto shrink-0 flex items-center px-1">
|
||||
{/* Tab actions: save button (mobile) + close-all dropdown */}
|
||||
<div className="ml-auto shrink-0 flex items-center px-1 gap-0.5">
|
||||
{/* Save button — shown in the tab bar on mobile */}
|
||||
{showSaveButton && onSave && (
|
||||
<button
|
||||
onClick={onSave}
|
||||
disabled={!isDirty}
|
||||
className={cn(
|
||||
'p-1 rounded transition-colors',
|
||||
isDirty
|
||||
? 'text-primary hover:text-primary hover:bg-muted/50'
|
||||
: 'text-muted-foreground/40 cursor-not-allowed'
|
||||
)}
|
||||
title="Save file (Ctrl+S)"
|
||||
aria-label="Save file"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
|
||||
@@ -32,6 +32,7 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { useFileEditorStore, type FileTreeNode } from '../use-file-editor-store';
|
||||
import { useFileBrowser } from '@/contexts/file-browser-context';
|
||||
|
||||
interface FileTreeProps {
|
||||
onFileSelect: (path: string) => void;
|
||||
@@ -104,6 +105,21 @@ function getGitStatusLabel(status: string | undefined): string {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate a file/folder name for safety.
|
||||
* Rejects names containing path separators, relative path components,
|
||||
* or names that are just dots (which resolve to parent/current directory).
|
||||
*/
|
||||
function isValidFileName(name: string): boolean {
|
||||
// Reject names containing path separators
|
||||
if (name.includes('/') || name.includes('\\')) return false;
|
||||
// Reject current/parent directory references
|
||||
if (name === '.' || name === '..') return false;
|
||||
// Reject empty or whitespace-only names
|
||||
if (!name.trim()) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
/** Inline input for creating/renaming items */
|
||||
function InlineInput({
|
||||
defaultValue,
|
||||
@@ -117,6 +133,7 @@ function InlineInput({
|
||||
placeholder?: string;
|
||||
}) {
|
||||
const [value, setValue] = useState(defaultValue || '');
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
// Guard against double-submission: pressing Enter triggers onKeyDown AND may
|
||||
// immediately trigger onBlur (e.g. when the component unmounts after submit).
|
||||
@@ -125,7 +142,9 @@ function InlineInput({
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
if (defaultValue) {
|
||||
// Select name without extension for rename
|
||||
// Select name without extension for rename.
|
||||
// For dotfiles (e.g. ".gitignore"), lastIndexOf('.') returns 0,
|
||||
// so we fall through to select() which selects the entire name.
|
||||
const dotIndex = defaultValue.lastIndexOf('.');
|
||||
if (dotIndex > 0) {
|
||||
inputRef.current?.setSelectionRange(0, dotIndex);
|
||||
@@ -135,97 +154,62 @@ function InlineInput({
|
||||
}
|
||||
}, [defaultValue]);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
if (submittedRef.current) return;
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) {
|
||||
onCancel();
|
||||
return;
|
||||
}
|
||||
if (!isValidFileName(trimmed)) {
|
||||
// Invalid name — surface error, keep editing so the user can fix it
|
||||
setErrorMessage('Invalid name: avoid /, \\, ".", or ".."');
|
||||
inputRef.current?.focus();
|
||||
return;
|
||||
}
|
||||
setErrorMessage(null);
|
||||
submittedRef.current = true;
|
||||
onSubmit(trimmed);
|
||||
}, [value, onSubmit, onCancel]);
|
||||
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && value.trim()) {
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
setValue(e.target.value);
|
||||
if (errorMessage) setErrorMessage(null);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleSubmit();
|
||||
} else if (e.key === 'Escape') {
|
||||
onCancel();
|
||||
}
|
||||
}}
|
||||
onBlur={() => {
|
||||
// Prevent duplicate submission if onKeyDown already triggered onSubmit
|
||||
if (submittedRef.current) return;
|
||||
submittedRef.current = true;
|
||||
onSubmit(value.trim());
|
||||
} else if (e.key === 'Escape') {
|
||||
onCancel();
|
||||
}
|
||||
}}
|
||||
onBlur={() => {
|
||||
// Prevent duplicate submission if onKeyDown already triggered onSubmit
|
||||
if (submittedRef.current) return;
|
||||
if (value.trim()) {
|
||||
submittedRef.current = true;
|
||||
onSubmit(value.trim());
|
||||
} else {
|
||||
onCancel();
|
||||
}
|
||||
}}
|
||||
placeholder={placeholder}
|
||||
className="text-sm bg-muted border border-border rounded px-1 py-0.5 w-full outline-none focus:border-primary"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/** Destination path picker dialog for copy/move operations */
|
||||
function DestinationPicker({
|
||||
onSubmit,
|
||||
onCancel,
|
||||
defaultPath,
|
||||
action,
|
||||
}: {
|
||||
onSubmit: (path: string) => void;
|
||||
onCancel: () => void;
|
||||
defaultPath: string;
|
||||
action: 'Copy' | 'Move';
|
||||
}) {
|
||||
const [path, setPath] = useState(defaultPath);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
inputRef.current?.select();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="bg-background border border-border rounded-lg shadow-lg w-full max-w-md">
|
||||
<div className="px-4 py-3 border-b border-border">
|
||||
<h3 className="text-sm font-medium">{action} To...</h3>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Enter the destination path for the {action.toLowerCase()} operation
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-4 py-3">
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={path}
|
||||
onChange={(e) => setPath(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && path.trim()) {
|
||||
onSubmit(path.trim());
|
||||
} else if (e.key === 'Escape') {
|
||||
onCancel();
|
||||
}
|
||||
}}
|
||||
placeholder="Enter destination path..."
|
||||
className="w-full text-sm bg-muted border border-border rounded px-3 py-2 outline-none focus:border-primary font-mono"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-border">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="px-3 py-1.5 text-sm rounded hover:bg-muted transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => path.trim() && onSubmit(path.trim())}
|
||||
disabled={!path.trim()}
|
||||
className="px-3 py-1.5 text-sm rounded bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{action}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
const trimmed = value.trim();
|
||||
if (trimmed && isValidFileName(trimmed)) {
|
||||
submittedRef.current = true;
|
||||
onSubmit(trimmed);
|
||||
}
|
||||
// If the name is empty or invalid, do NOT call onCancel — keep the
|
||||
// input open so the user can correct the value (mirrors handleSubmit).
|
||||
// Optionally re-focus so the user can continue editing.
|
||||
else {
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
}}
|
||||
placeholder={placeholder}
|
||||
className={cn(
|
||||
'text-sm bg-muted border rounded px-1 py-0.5 w-full outline-none focus:border-primary',
|
||||
errorMessage ? 'border-red-500' : 'border-border'
|
||||
)}
|
||||
/>
|
||||
{errorMessage && <span className="text-[10px] text-red-500 px-0.5">{errorMessage}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -276,12 +260,11 @@ function TreeNode({
|
||||
selectedPaths,
|
||||
toggleSelectedPath,
|
||||
} = useFileEditorStore();
|
||||
const { openFileBrowser } = useFileBrowser();
|
||||
const [isCreatingFile, setIsCreatingFile] = useState(false);
|
||||
const [isCreatingFolder, setIsCreatingFolder] = useState(false);
|
||||
const [isRenaming, setIsRenaming] = useState(false);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [showCopyPicker, setShowCopyPicker] = useState(false);
|
||||
const [showMovePicker, setShowMovePicker] = useState(false);
|
||||
|
||||
const isExpanded = expandedFolders.has(node.path);
|
||||
const isActive = activeFilePath === node.path;
|
||||
@@ -409,30 +392,6 @@ function TreeNode({
|
||||
|
||||
return (
|
||||
<div key={node.path}>
|
||||
{/* Destination picker dialogs */}
|
||||
{showCopyPicker && onCopyItem && (
|
||||
<DestinationPicker
|
||||
action="Copy"
|
||||
defaultPath={node.path}
|
||||
onSubmit={async (destPath) => {
|
||||
setShowCopyPicker(false);
|
||||
await onCopyItem(node.path, destPath);
|
||||
}}
|
||||
onCancel={() => setShowCopyPicker(false)}
|
||||
/>
|
||||
)}
|
||||
{showMovePicker && onMoveItem && (
|
||||
<DestinationPicker
|
||||
action="Move"
|
||||
defaultPath={node.path}
|
||||
onSubmit={async (destPath) => {
|
||||
setShowMovePicker(false);
|
||||
await onMoveItem(node.path, destPath);
|
||||
}}
|
||||
onCancel={() => setShowMovePicker(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isRenaming ? (
|
||||
<div style={{ paddingLeft: `${depth * 16 + 8}px` }} className="py-0.5 px-2">
|
||||
<InlineInput
|
||||
@@ -630,9 +589,21 @@ function TreeNode({
|
||||
{/* Copy To... */}
|
||||
{onCopyItem && (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
onClick={async (e) => {
|
||||
e.stopPropagation();
|
||||
setShowCopyPicker(true);
|
||||
try {
|
||||
const parentPath = node.path.substring(0, node.path.lastIndexOf('/')) || '/';
|
||||
const destPath = await openFileBrowser({
|
||||
title: `Copy "${node.name}" To...`,
|
||||
description: 'Select the destination folder for the copy operation',
|
||||
initialPath: parentPath,
|
||||
});
|
||||
if (destPath) {
|
||||
await onCopyItem(node.path, destPath);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Copy operation failed:', err);
|
||||
}
|
||||
}}
|
||||
className="gap-2"
|
||||
>
|
||||
@@ -644,9 +615,21 @@ function TreeNode({
|
||||
{/* Move To... */}
|
||||
{onMoveItem && (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
onClick={async (e) => {
|
||||
e.stopPropagation();
|
||||
setShowMovePicker(true);
|
||||
try {
|
||||
const parentPath = node.path.substring(0, node.path.lastIndexOf('/')) || '/';
|
||||
const destPath = await openFileBrowser({
|
||||
title: `Move "${node.name}" To...`,
|
||||
description: 'Select the destination folder for the move operation',
|
||||
initialPath: parentPath,
|
||||
});
|
||||
if (destPath) {
|
||||
await onMoveItem(node.path, destPath);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Move operation failed:', err);
|
||||
}
|
||||
}}
|
||||
className="gap-2"
|
||||
>
|
||||
@@ -775,8 +758,15 @@ export function FileTree({
|
||||
onDragDropMove,
|
||||
effectivePath,
|
||||
}: FileTreeProps) {
|
||||
const { fileTree, showHiddenFiles, setShowHiddenFiles, gitStatusMap, setDragState, gitBranch } =
|
||||
useFileEditorStore();
|
||||
const {
|
||||
fileTree,
|
||||
showHiddenFiles,
|
||||
setShowHiddenFiles,
|
||||
gitStatusMap,
|
||||
dragState,
|
||||
setDragState,
|
||||
gitBranch,
|
||||
} = useFileEditorStore();
|
||||
const [isCreatingFile, setIsCreatingFile] = useState(false);
|
||||
const [isCreatingFolder, setIsCreatingFolder] = useState(false);
|
||||
|
||||
@@ -791,10 +781,13 @@ export function FileTree({
|
||||
e.preventDefault();
|
||||
if (effectivePath) {
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
setDragState({ draggedPaths: [], dropTargetPath: effectivePath });
|
||||
// Skip redundant state update if already targeting the same path
|
||||
if (dragState.dropTargetPath !== effectivePath) {
|
||||
setDragState({ ...dragState, dropTargetPath: effectivePath });
|
||||
}
|
||||
}
|
||||
},
|
||||
[effectivePath, setDragState]
|
||||
[effectivePath, dragState, setDragState]
|
||||
);
|
||||
|
||||
const handleRootDrop = useCallback(
|
||||
@@ -818,47 +811,54 @@ export function FileTree({
|
||||
return (
|
||||
<div className="flex flex-col h-full" data-testid="file-tree">
|
||||
{/* Tree toolbar */}
|
||||
<div className="flex items-center justify-between px-2 py-1.5 border-b border-border">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Explorer
|
||||
</span>
|
||||
{gitBranch && (
|
||||
<span className="text-[10px] text-primary font-medium px-1 py-0.5 bg-primary/10 rounded">
|
||||
<div className="px-2 py-1.5 border-b border-border">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Explorer
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-0.5">
|
||||
<button
|
||||
onClick={() => setIsCreatingFile(true)}
|
||||
className="p-1 hover:bg-accent rounded"
|
||||
title="New file"
|
||||
>
|
||||
<FilePlus className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsCreatingFolder(true)}
|
||||
className="p-1 hover:bg-accent rounded"
|
||||
title="New folder"
|
||||
>
|
||||
<FolderPlus className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowHiddenFiles(!showHiddenFiles)}
|
||||
className="p-1 hover:bg-accent rounded"
|
||||
title={showHiddenFiles ? 'Hide dotfiles' : 'Show dotfiles'}
|
||||
>
|
||||
{showHiddenFiles ? (
|
||||
<Eye className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
) : (
|
||||
<EyeOff className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
<button onClick={onRefresh} className="p-1 hover:bg-accent rounded" title="Refresh">
|
||||
<RefreshCw className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{gitBranch && (
|
||||
<div className="mt-1 min-w-0">
|
||||
<span
|
||||
className="inline-block max-w-full truncate whitespace-nowrap text-[10px] text-primary font-medium px-1 py-0.5 bg-primary/10 rounded"
|
||||
title={gitBranch}
|
||||
>
|
||||
{gitBranch}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-0.5">
|
||||
<button
|
||||
onClick={() => setIsCreatingFile(true)}
|
||||
className="p-1 hover:bg-accent rounded"
|
||||
title="New file"
|
||||
>
|
||||
<FilePlus className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsCreatingFolder(true)}
|
||||
className="p-1 hover:bg-accent rounded"
|
||||
title="New folder"
|
||||
>
|
||||
<FolderPlus className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowHiddenFiles(!showHiddenFiles)}
|
||||
className="p-1 hover:bg-accent rounded"
|
||||
title={showHiddenFiles ? 'Hide dotfiles' : 'Show dotfiles'}
|
||||
>
|
||||
{showHiddenFiles ? (
|
||||
<Eye className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
) : (
|
||||
<EyeOff className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
<button onClick={onRefresh} className="p-1 hover:bg-accent rounded" title="Refresh">
|
||||
<RefreshCw className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tree content */}
|
||||
|
||||
@@ -650,6 +650,12 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
|
||||
|
||||
const handleRenameItem = useCallback(
|
||||
async (oldPath: string, newName: string) => {
|
||||
// Extract the current file/folder name from the old path
|
||||
const oldName = oldPath.split('/').pop() || '';
|
||||
|
||||
// If the name hasn't changed, skip the rename entirely (no-op)
|
||||
if (newName === oldName) return;
|
||||
|
||||
const parentPath = oldPath.substring(0, oldPath.lastIndexOf('/'));
|
||||
const newPath = `${parentPath}/${newName}`;
|
||||
|
||||
@@ -1028,6 +1034,9 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
|
||||
onTabSelect={setActiveTab}
|
||||
onTabClose={handleTabClose}
|
||||
onCloseAll={handleCloseAll}
|
||||
onSave={handleSave}
|
||||
isDirty={activeTab?.isDirty && !activeTab?.isBinary && !activeTab?.isTooLarge}
|
||||
showSaveButton={isMobile && !!activeTab && !activeTab.isBinary && !activeTab.isTooLarge}
|
||||
/>
|
||||
|
||||
{/* Editor content */}
|
||||
@@ -1320,24 +1329,6 @@ export function FileEditorView({ initialPath }: FileEditorViewProps) {
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{/* Mobile: Save button in main toolbar */}
|
||||
{activeTab &&
|
||||
!activeTab.isBinary &&
|
||||
!activeTab.isTooLarge &&
|
||||
isMobile &&
|
||||
!mobileBrowserVisible && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
onClick={handleSave}
|
||||
disabled={!activeTab.isDirty}
|
||||
className="lg:hidden"
|
||||
title={editorAutoSave ? 'Auto-save enabled (Ctrl+S)' : 'Save file (Ctrl+S)'}
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Tablet/Mobile: actions panel trigger */}
|
||||
<HeaderActionsPanelTrigger
|
||||
isOpen={showActionsPanel}
|
||||
|
||||
@@ -18,6 +18,7 @@ import { IssueRow, IssueDetailPanel, IssuesListHeader } from './github-issues-vi
|
||||
import { ValidationDialog } from './github-issues-view/dialogs';
|
||||
import { AddFeatureDialog } from './board-view/dialogs';
|
||||
import { formatDate, getFeaturePriority } from './github-issues-view/utils';
|
||||
import { resolveModelString } from '@automaker/model-resolver';
|
||||
import { useModelOverride } from '@/components/shared';
|
||||
import type {
|
||||
ValidateIssueOptions,
|
||||
@@ -153,11 +154,17 @@ export function GitHubIssuesView() {
|
||||
}
|
||||
}
|
||||
|
||||
return parts.filter(Boolean).join('\n');
|
||||
return parts.join('\n');
|
||||
},
|
||||
[cachedValidations]
|
||||
);
|
||||
|
||||
// Memoize the prefilled description to avoid recomputing on every render
|
||||
const prefilledDescription = useMemo(
|
||||
() => (createFeatureIssue ? buildIssueDescription(createFeatureIssue) : undefined),
|
||||
[createFeatureIssue, buildIssueDescription]
|
||||
);
|
||||
|
||||
// Open the Add Feature dialog with pre-filled data from a GitHub issue
|
||||
const handleCreateFeature = useCallback((issue: GitHubIssue) => {
|
||||
setCreateFeatureIssue(issue);
|
||||
@@ -178,7 +185,10 @@ export function GitHubIssuesView() {
|
||||
branchName: string;
|
||||
planningMode: string;
|
||||
requirePlanApproval: boolean;
|
||||
excludedPipelineSteps?: string[];
|
||||
workMode: string;
|
||||
imagePaths?: Array<{ id: string; path: string; description?: string }>;
|
||||
textFilePaths?: Array<{ id: string; path: string; description?: string }>;
|
||||
}) => {
|
||||
if (!currentProject?.path) {
|
||||
toast.error('No project selected');
|
||||
@@ -203,6 +213,11 @@ export function GitHubIssuesView() {
|
||||
branchName: featureData.workMode === 'current' ? currentBranch : featureData.branchName,
|
||||
planningMode: featureData.planningMode,
|
||||
requirePlanApproval: featureData.requirePlanApproval,
|
||||
excludedPipelineSteps: featureData.excludedPipelineSteps,
|
||||
...(featureData.imagePaths?.length ? { imagePaths: featureData.imagePaths } : {}),
|
||||
...(featureData.textFilePaths?.length
|
||||
? { textFilePaths: featureData.textFilePaths }
|
||||
: {}),
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
@@ -240,7 +255,7 @@ export function GitHubIssuesView() {
|
||||
const api = getElectronAPI();
|
||||
if (api.features?.create) {
|
||||
// Build description from issue body + validation info
|
||||
const description = [
|
||||
const parts = [
|
||||
`**From GitHub Issue #${issue.number}**`,
|
||||
'',
|
||||
issue.body || 'No description provided.',
|
||||
@@ -249,13 +264,18 @@ export function GitHubIssuesView() {
|
||||
'',
|
||||
'**AI Validation Analysis:**',
|
||||
validation.reasoning,
|
||||
validation.suggestedFix ? `\n**Suggested Approach:**\n${validation.suggestedFix}` : '',
|
||||
validation.relatedFiles?.length
|
||||
? `\n**Related Files:**\n${validation.relatedFiles.map((f) => `- \`${f}\``).join('\n')}`
|
||||
: '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join('\n');
|
||||
];
|
||||
if (validation.suggestedFix) {
|
||||
parts.push('', `**Suggested Approach:**`, validation.suggestedFix);
|
||||
}
|
||||
if (validation.relatedFiles?.length) {
|
||||
parts.push(
|
||||
'',
|
||||
'**Related Files:**',
|
||||
...validation.relatedFiles.map((f) => `- \`${f}\``)
|
||||
);
|
||||
}
|
||||
const description = parts.join('\n');
|
||||
|
||||
const feature = {
|
||||
id: `issue-${issue.number}-${generateUUID()}`,
|
||||
@@ -265,7 +285,7 @@ export function GitHubIssuesView() {
|
||||
status: 'backlog' as const,
|
||||
passes: false,
|
||||
priority: getFeaturePriority(validation.estimatedComplexity),
|
||||
model: 'opus',
|
||||
model: resolveModelString('opus'),
|
||||
thinkingLevel: 'none' as const,
|
||||
branchName: currentBranch,
|
||||
createdAt: new Date().toISOString(),
|
||||
@@ -452,9 +472,7 @@ export function GitHubIssuesView() {
|
||||
isMaximized={false}
|
||||
projectPath={currentProject?.path}
|
||||
prefilledTitle={createFeatureIssue?.title}
|
||||
prefilledDescription={
|
||||
createFeatureIssue ? buildIssueDescription(createFeatureIssue) : undefined
|
||||
}
|
||||
prefilledDescription={prefilledDescription}
|
||||
prefilledCategory="From GitHub"
|
||||
/>
|
||||
|
||||
|
||||
@@ -78,7 +78,14 @@ export function IssueDetailPanel({
|
||||
<div className="flex items-center justify-between p-3 border-b border-border bg-muted/30 gap-2">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{isMobile && (
|
||||
<Button variant="ghost" size="sm" onClick={onClose} className="shrink-0 -ml-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
className="shrink-0 -ml-1"
|
||||
aria-label="Back"
|
||||
title="Back"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
@@ -104,7 +111,13 @@ export function IssueDetailPanel({
|
||||
if (cached && !isStale) {
|
||||
return (
|
||||
<>
|
||||
<Button variant="outline" size="sm" onClick={() => onViewCachedValidation(issue)}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onViewCachedValidation(issue)}
|
||||
aria-label="View Result"
|
||||
title="View Result"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 mr-1 text-green-500" />
|
||||
{!isMobile && 'View Result'}
|
||||
</Button>
|
||||
@@ -123,7 +136,13 @@ export function IssueDetailPanel({
|
||||
if (cached && isStale) {
|
||||
return (
|
||||
<>
|
||||
<Button variant="outline" size="sm" onClick={() => onViewCachedValidation(issue)}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onViewCachedValidation(issue)}
|
||||
aria-label="View (stale)"
|
||||
title="View (stale)"
|
||||
>
|
||||
<Clock className="h-4 w-4 mr-1 text-yellow-500" />
|
||||
{!isMobile && 'View (stale)'}
|
||||
</Button>
|
||||
@@ -140,6 +159,8 @@ export function IssueDetailPanel({
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={() => onValidateIssue(issue, getValidationOptions(true))}
|
||||
aria-label="Re-validate"
|
||||
title="Re-validate"
|
||||
>
|
||||
<Wand2 className="h-4 w-4 mr-1" />
|
||||
{!isMobile && 'Re-validate'}
|
||||
@@ -163,6 +184,8 @@ export function IssueDetailPanel({
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={() => onValidateIssue(issue, getValidationOptions())}
|
||||
aria-label="Validate with AI"
|
||||
title="Validate with AI"
|
||||
>
|
||||
<Wand2 className="h-4 w-4 mr-1" />
|
||||
{!isMobile && 'Validate with AI'}
|
||||
@@ -181,7 +204,13 @@ export function IssueDetailPanel({
|
||||
Create Feature
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="outline" size="sm" onClick={() => onOpenInGitHub(issue.url)}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onOpenInGitHub(issue.url)}
|
||||
aria-label="Open in GitHub"
|
||||
title="Open in GitHub"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
{!isMobile && <span className="ml-1">Open in GitHub</span>}
|
||||
</Button>
|
||||
|
||||
@@ -21,11 +21,12 @@ import { getElectronAPI, type GitHubPR } from '@/lib/electron';
|
||||
import { useAppStore, type Feature } from '@/store/app-store';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Markdown } from '@/components/ui/markdown';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { cn, generateUUID } from '@/lib/utils';
|
||||
import { useIsMobile } from '@/hooks/use-media-query';
|
||||
import { useGitHubPRs } from '@/hooks/queries';
|
||||
import { useCreateFeature } from '@/hooks/mutations/use-feature-mutations';
|
||||
import { PRCommentResolutionDialog } from '@/components/dialogs/pr-comment-resolution-dialog';
|
||||
import { PRCommentResolutionDialog } from '@/components/dialogs';
|
||||
import { resolveModelString } from '@automaker/model-resolver';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -72,15 +73,15 @@ export function GitHubPRsView() {
|
||||
return;
|
||||
}
|
||||
|
||||
const featureId = `feature-${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
||||
const featureId = `pr-${pr.number}-${generateUUID()}`;
|
||||
const feature: Feature = {
|
||||
id: featureId,
|
||||
title: `Address PR #${pr.number} Review Comments`,
|
||||
category: 'bug-fix',
|
||||
description: `Read the review requests on PR #${pr.number} and address any feedback the best you can.`,
|
||||
steps: [],
|
||||
status: 'in_progress',
|
||||
model: 'opus',
|
||||
status: 'backlog',
|
||||
model: resolveModelString('opus'),
|
||||
thinkingLevel: 'none',
|
||||
planningMode: 'skip',
|
||||
...(pr.headRefName ? { branchName: pr.headRefName } : {}),
|
||||
@@ -91,11 +92,26 @@ export function GitHubPRsView() {
|
||||
|
||||
// Start the feature immediately after creation
|
||||
const api = getElectronAPI();
|
||||
await api.features?.run(currentProject.path, featureId);
|
||||
|
||||
toast.success('Feature created and started', {
|
||||
description: `Addressing review comments on PR #${pr.number}`,
|
||||
});
|
||||
if (api.features?.run) {
|
||||
try {
|
||||
await api.features.run(currentProject.path, featureId);
|
||||
toast.success('Feature created and started', {
|
||||
description: `Addressing review comments on PR #${pr.number}`,
|
||||
});
|
||||
} catch (runError) {
|
||||
toast.error('Feature created but failed to start', {
|
||||
description:
|
||||
runError instanceof Error
|
||||
? runError.message
|
||||
: 'An error occurred while starting the feature',
|
||||
});
|
||||
}
|
||||
} else {
|
||||
toast.error('Cannot start feature', {
|
||||
description:
|
||||
'Feature API is not available. The feature was created but could not be started.',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to create feature', {
|
||||
description: error instanceof Error ? error.message : 'An error occurred',
|
||||
@@ -242,164 +258,177 @@ export function GitHubPRsView() {
|
||||
</div>
|
||||
|
||||
{/* PR Detail Panel */}
|
||||
{selectedPR && (
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Detail Header */}
|
||||
<div className="flex items-center justify-between p-3 border-b border-border bg-muted/30 gap-2">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{isMobile && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedPR(null)}
|
||||
className="shrink-0 -ml-1"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
{selectedPR.state === 'MERGED' ? (
|
||||
<GitMerge className="h-4 w-4 text-purple-500 shrink-0" />
|
||||
) : (
|
||||
<GitPullRequest className="h-4 w-4 text-green-500 shrink-0" />
|
||||
)}
|
||||
<span className="text-sm font-medium truncate">
|
||||
#{selectedPR.number} {selectedPR.title}
|
||||
</span>
|
||||
{selectedPR.isDraft && (
|
||||
<span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
|
||||
Draft
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={cn('flex items-center gap-2 shrink-0', isMobile && 'gap-1')}>
|
||||
{!isMobile && (
|
||||
<Button variant="outline" size="sm" onClick={() => setCommentDialogPR(selectedPR)}>
|
||||
<MessageSquare className="h-4 w-4 mr-1" />
|
||||
Manage Comments
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleOpenInGitHub(selectedPR.url)}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
{!isMobile && <span className="ml-1">Open in GitHub</span>}
|
||||
</Button>
|
||||
{!isMobile && (
|
||||
<Button variant="ghost" size="sm" onClick={() => setSelectedPR(null)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PR Detail Content */}
|
||||
<div className={cn('flex-1 overflow-auto', isMobile ? 'p-4' : 'p-6')}>
|
||||
{/* Title */}
|
||||
<h1 className="text-xl font-bold mb-2">{selectedPR.title}</h1>
|
||||
|
||||
{/* Meta info */}
|
||||
<div className="flex items-center gap-3 text-sm text-muted-foreground mb-4 flex-wrap">
|
||||
<span
|
||||
className={cn(
|
||||
'px-2 py-0.5 rounded-full text-xs font-medium',
|
||||
selectedPR.state === 'MERGED'
|
||||
? 'bg-purple-500/10 text-purple-500'
|
||||
: selectedPR.isDraft
|
||||
? 'bg-muted text-muted-foreground'
|
||||
: 'bg-green-500/10 text-green-500'
|
||||
)}
|
||||
>
|
||||
{selectedPR.state === 'MERGED' ? 'Merged' : selectedPR.isDraft ? 'Draft' : 'Open'}
|
||||
</span>
|
||||
{getReviewStatus(selectedPR) && (
|
||||
<span
|
||||
className={cn(
|
||||
'px-2 py-0.5 rounded-full text-xs font-medium',
|
||||
getReviewStatus(selectedPR)!.bg,
|
||||
getReviewStatus(selectedPR)!.color
|
||||
{selectedPR &&
|
||||
(() => {
|
||||
const reviewStatus = getReviewStatus(selectedPR);
|
||||
return (
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Detail Header */}
|
||||
<div className="flex items-center justify-between p-3 border-b border-border bg-muted/30 gap-2">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{isMobile && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedPR(null)}
|
||||
className="shrink-0 -ml-1"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
>
|
||||
{getReviewStatus(selectedPR)!.label}
|
||||
</span>
|
||||
)}
|
||||
<span>
|
||||
#{selectedPR.number} opened {formatDate(selectedPR.createdAt)} by{' '}
|
||||
<span className="font-medium text-foreground">{selectedPR.author.login}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Branch info */}
|
||||
{selectedPR.headRefName && (
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="text-xs text-muted-foreground">Branch:</span>
|
||||
<span className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
|
||||
{selectedPR.headRefName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Labels */}
|
||||
{selectedPR.labels.length > 0 && (
|
||||
<div className="flex items-center gap-2 mb-6 flex-wrap">
|
||||
{selectedPR.labels.map((label) => (
|
||||
<span
|
||||
key={label.name}
|
||||
className="px-2 py-0.5 text-xs font-medium rounded-full"
|
||||
style={{
|
||||
backgroundColor: `#${label.color}20`,
|
||||
color: `#${label.color}`,
|
||||
border: `1px solid #${label.color}40`,
|
||||
}}
|
||||
>
|
||||
{label.name}
|
||||
{selectedPR.state === 'MERGED' ? (
|
||||
<GitMerge className="h-4 w-4 text-purple-500 shrink-0" />
|
||||
) : (
|
||||
<GitPullRequest className="h-4 w-4 text-green-500 shrink-0" />
|
||||
)}
|
||||
<span className="text-sm font-medium truncate">
|
||||
#{selectedPR.number} {selectedPR.title}
|
||||
</span>
|
||||
))}
|
||||
{selectedPR.isDraft && (
|
||||
<span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
|
||||
Draft
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={cn('flex items-center gap-2 shrink-0', isMobile && 'gap-1')}>
|
||||
{!isMobile && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCommentDialogPR(selectedPR)}
|
||||
>
|
||||
<MessageSquare className="h-4 w-4 mr-1" />
|
||||
Manage Comments
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleOpenInGitHub(selectedPR.url)}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
{!isMobile && <span className="ml-1">Open in GitHub</span>}
|
||||
</Button>
|
||||
{!isMobile && (
|
||||
<Button variant="ghost" size="sm" onClick={() => setSelectedPR(null)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Body */}
|
||||
{selectedPR.body ? (
|
||||
<Markdown className="text-sm">{selectedPR.body}</Markdown>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground italic">No description provided.</p>
|
||||
)}
|
||||
{/* PR Detail Content */}
|
||||
<div className={cn('flex-1 overflow-auto', isMobile ? 'p-4' : 'p-6')}>
|
||||
{/* Title */}
|
||||
<h1 className="text-xl font-bold mb-2">{selectedPR.title}</h1>
|
||||
|
||||
{/* Review Comments CTA */}
|
||||
<div className="mt-8 p-4 rounded-lg bg-blue-500/5 border border-blue-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<MessageSquare className="h-4 w-4 text-blue-500" />
|
||||
<span className="text-sm font-medium">Review Comments</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Manage review comments individually or let AI address all feedback automatically.
|
||||
</p>
|
||||
<div className={cn('flex gap-2', isMobile ? 'flex-col' : 'items-center')}>
|
||||
<Button variant="outline" onClick={() => setCommentDialogPR(selectedPR)}>
|
||||
<MessageSquare className="h-4 w-4 mr-2" />
|
||||
Manage Review Comments
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => handleAutoAddressComments(selectedPR)}>
|
||||
<Zap className="h-4 w-4 mr-2" />
|
||||
Address Review Comments
|
||||
</Button>
|
||||
{/* Meta info */}
|
||||
<div className="flex items-center gap-3 text-sm text-muted-foreground mb-4 flex-wrap">
|
||||
<span
|
||||
className={cn(
|
||||
'px-2 py-0.5 rounded-full text-xs font-medium',
|
||||
selectedPR.state === 'MERGED'
|
||||
? 'bg-purple-500/10 text-purple-500'
|
||||
: selectedPR.isDraft
|
||||
? 'bg-muted text-muted-foreground'
|
||||
: 'bg-green-500/10 text-green-500'
|
||||
)}
|
||||
>
|
||||
{selectedPR.state === 'MERGED'
|
||||
? 'Merged'
|
||||
: selectedPR.isDraft
|
||||
? 'Draft'
|
||||
: 'Open'}
|
||||
</span>
|
||||
{reviewStatus && (
|
||||
<span
|
||||
className={cn(
|
||||
'px-2 py-0.5 rounded-full text-xs font-medium',
|
||||
reviewStatus.bg,
|
||||
reviewStatus.color
|
||||
)}
|
||||
>
|
||||
{reviewStatus.label}
|
||||
</span>
|
||||
)}
|
||||
<span>
|
||||
#{selectedPR.number} opened {formatDate(selectedPR.createdAt)} by{' '}
|
||||
<span className="font-medium text-foreground">{selectedPR.author.login}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Branch info */}
|
||||
{selectedPR.headRefName && (
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="text-xs text-muted-foreground">Branch:</span>
|
||||
<span className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
|
||||
{selectedPR.headRefName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Labels */}
|
||||
{selectedPR.labels.length > 0 && (
|
||||
<div className="flex items-center gap-2 mb-6 flex-wrap">
|
||||
{selectedPR.labels.map((label) => (
|
||||
<span
|
||||
key={label.name}
|
||||
className="px-2 py-0.5 text-xs font-medium rounded-full"
|
||||
style={{
|
||||
backgroundColor: `#${label.color}20`,
|
||||
color: `#${label.color}`,
|
||||
border: `1px solid #${label.color}40`,
|
||||
}}
|
||||
>
|
||||
{label.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Body */}
|
||||
{selectedPR.body ? (
|
||||
<Markdown className="text-sm">{selectedPR.body}</Markdown>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground italic">No description provided.</p>
|
||||
)}
|
||||
|
||||
{/* Review Comments CTA */}
|
||||
<div className="mt-8 p-4 rounded-lg bg-blue-500/5 border border-blue-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<MessageSquare className="h-4 w-4 text-blue-500" />
|
||||
<span className="text-sm font-medium">Review Comments</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Manage review comments individually or let AI address all feedback
|
||||
automatically.
|
||||
</p>
|
||||
<div className={cn('flex gap-2', isMobile ? 'flex-col' : 'items-center')}>
|
||||
<Button variant="outline" onClick={() => setCommentDialogPR(selectedPR)}>
|
||||
<MessageSquare className="h-4 w-4 mr-2" />
|
||||
Manage Review Comments
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => handleAutoAddressComments(selectedPR)}>
|
||||
<Zap className="h-4 w-4 mr-2" />
|
||||
Address Review Comments
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Open in GitHub CTA */}
|
||||
<div className="mt-4 p-4 rounded-lg bg-muted/50 border border-border">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
View code changes, comments, and reviews on GitHub.
|
||||
</p>
|
||||
<Button onClick={() => handleOpenInGitHub(selectedPR.url)}>
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
View Full PR on GitHub
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Open in GitHub CTA */}
|
||||
<div className="mt-4 p-4 rounded-lg bg-muted/50 border border-border">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
View code changes, comments, and reviews on GitHub.
|
||||
</p>
|
||||
<Button onClick={() => handleOpenInGitHub(selectedPR.url)}>
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
View Full PR on GitHub
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* PR Comment Resolution Dialog */}
|
||||
{commentDialogPR && (
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useCallback, type KeyboardEvent } from 'react';
|
||||
import { useState, useEffect, useCallback, useMemo, useRef, type KeyboardEvent } from 'react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
@@ -19,6 +19,7 @@ import { cn } from '@/lib/utils';
|
||||
import { useProjectSettings } from '@/hooks/queries';
|
||||
import { useUpdateProjectSettings } from '@/hooks/mutations';
|
||||
import type { Project } from '@/lib/electron';
|
||||
import { toast } from 'sonner';
|
||||
import { DEFAULT_TERMINAL_SCRIPTS } from './terminal-scripts-constants';
|
||||
|
||||
/** Preset dev server commands for quick selection */
|
||||
@@ -91,46 +92,69 @@ export function CommandsAndScriptsSection({ project }: CommandsAndScriptsSection
|
||||
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
|
||||
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
||||
|
||||
// Reset local state when project changes
|
||||
useEffect(() => {
|
||||
setDevCommand('');
|
||||
setOriginalDevCommand('');
|
||||
setTestCommand('');
|
||||
setOriginalTestCommand('');
|
||||
setScripts([]);
|
||||
setOriginalScripts([]);
|
||||
}, [project.path]);
|
||||
// Track previous project path to detect project switches
|
||||
const prevProjectPathRef = useRef(project.path);
|
||||
// Track whether we've done the initial sync for the current project
|
||||
const isInitializedRef = useRef(false);
|
||||
|
||||
// Sync commands state when project settings load
|
||||
// Sync commands and scripts state when project settings load or project changes
|
||||
useEffect(() => {
|
||||
if (projectSettings) {
|
||||
const dev = projectSettings.devCommand || '';
|
||||
const test = projectSettings.testCommand || '';
|
||||
setDevCommand(dev);
|
||||
setOriginalDevCommand(dev);
|
||||
setTestCommand(test);
|
||||
setOriginalTestCommand(test);
|
||||
}
|
||||
}, [projectSettings]);
|
||||
const projectChanged = prevProjectPathRef.current !== project.path;
|
||||
prevProjectPathRef.current = project.path;
|
||||
|
||||
// Sync scripts state when project settings load
|
||||
useEffect(() => {
|
||||
if (projectSettings) {
|
||||
const configured = projectSettings.terminalScripts;
|
||||
const scriptList =
|
||||
configured && configured.length > 0
|
||||
? configured.map((s) => ({ id: s.id, name: s.name, command: s.command }))
|
||||
: DEFAULT_TERMINAL_SCRIPTS.map((s) => ({ ...s }));
|
||||
setScripts(scriptList);
|
||||
setOriginalScripts(JSON.parse(JSON.stringify(scriptList)));
|
||||
// Always clear local state on project change to avoid flashing stale data
|
||||
if (projectChanged) {
|
||||
isInitializedRef.current = false;
|
||||
setDevCommand('');
|
||||
setOriginalDevCommand('');
|
||||
setTestCommand('');
|
||||
setOriginalTestCommand('');
|
||||
setScripts([]);
|
||||
setOriginalScripts([]);
|
||||
}
|
||||
|
||||
// Apply project settings only when they are available
|
||||
if (projectSettings) {
|
||||
// Only sync from server if this is the initial load or if there are no unsaved edits.
|
||||
// This prevents background refetches from overwriting in-progress local edits.
|
||||
const isDirty =
|
||||
isInitializedRef.current &&
|
||||
(devCommand !== originalDevCommand ||
|
||||
testCommand !== originalTestCommand ||
|
||||
JSON.stringify(scripts) !== JSON.stringify(originalScripts));
|
||||
|
||||
if (!isInitializedRef.current || !isDirty) {
|
||||
// Commands
|
||||
const dev = projectSettings.devCommand || '';
|
||||
const test = projectSettings.testCommand || '';
|
||||
setDevCommand(dev);
|
||||
setOriginalDevCommand(dev);
|
||||
setTestCommand(test);
|
||||
setOriginalTestCommand(test);
|
||||
|
||||
// Scripts
|
||||
const configured = projectSettings.terminalScripts;
|
||||
const scriptList =
|
||||
configured && configured.length > 0
|
||||
? configured.map((s) => ({ id: s.id, name: s.name, command: s.command }))
|
||||
: DEFAULT_TERMINAL_SCRIPTS.map((s) => ({ ...s }));
|
||||
setScripts(scriptList);
|
||||
setOriginalScripts(structuredClone(scriptList));
|
||||
|
||||
isInitializedRef.current = true;
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [projectSettings, project.path]);
|
||||
|
||||
// ── Change detection ──
|
||||
const hasDevChanges = devCommand !== originalDevCommand;
|
||||
const hasTestChanges = testCommand !== originalTestCommand;
|
||||
const hasCommandChanges = hasDevChanges || hasTestChanges;
|
||||
const hasScriptChanges = JSON.stringify(scripts) !== JSON.stringify(originalScripts);
|
||||
const hasScriptChanges = useMemo(
|
||||
() => JSON.stringify(scripts) !== JSON.stringify(originalScripts),
|
||||
[scripts, originalScripts]
|
||||
);
|
||||
const hasChanges = hasCommandChanges || hasScriptChanges;
|
||||
const isSaving = updateSettingsMutation.isPending;
|
||||
|
||||
@@ -158,7 +182,12 @@ export function CommandsAndScriptsSection({ project }: CommandsAndScriptsSection
|
||||
setTestCommand(normalizedTestCommand);
|
||||
setOriginalTestCommand(normalizedTestCommand);
|
||||
setScripts(normalizedScripts);
|
||||
setOriginalScripts(JSON.parse(JSON.stringify(normalizedScripts)));
|
||||
setOriginalScripts(structuredClone(normalizedScripts));
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error('Failed to save settings', {
|
||||
description: error instanceof Error ? error.message : 'An unexpected error occurred',
|
||||
});
|
||||
},
|
||||
}
|
||||
);
|
||||
@@ -168,7 +197,7 @@ export function CommandsAndScriptsSection({ project }: CommandsAndScriptsSection
|
||||
const handleReset = useCallback(() => {
|
||||
setDevCommand(originalDevCommand);
|
||||
setTestCommand(originalTestCommand);
|
||||
setScripts(JSON.parse(JSON.stringify(originalScripts)));
|
||||
setScripts(structuredClone(originalScripts));
|
||||
}, [originalDevCommand, originalTestCommand, originalScripts]);
|
||||
|
||||
// ── Command handlers ──
|
||||
@@ -258,6 +287,36 @@ export function CommandsAndScriptsSection({ project }: CommandsAndScriptsSection
|
||||
setDragOverIndex(null);
|
||||
}, []);
|
||||
|
||||
// ── Keyboard reorder helpers for accessibility ──
|
||||
const moveScript = useCallback((fromIndex: number, toIndex: number) => {
|
||||
setScripts((prev) => {
|
||||
if (toIndex < 0 || toIndex >= prev.length) return prev;
|
||||
const newScripts = [...prev];
|
||||
const [removed] = newScripts.splice(fromIndex, 1);
|
||||
newScripts.splice(toIndex, 0, removed);
|
||||
return newScripts;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleDragHandleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent, index: number) => {
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
moveScript(index, index - 1);
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
moveScript(index, index + 1);
|
||||
} else if (e.key === 'Home') {
|
||||
e.preventDefault();
|
||||
moveScript(index, 0);
|
||||
} else if (e.key === 'End') {
|
||||
e.preventDefault();
|
||||
moveScript(index, scripts.length - 1);
|
||||
}
|
||||
},
|
||||
[moveScript, scripts.length]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* ── Commands Card ── */}
|
||||
@@ -476,10 +535,14 @@ export function CommandsAndScriptsSection({ project }: CommandsAndScriptsSection
|
||||
onDrop={(e) => handleDrop(e)}
|
||||
onDragEnd={(e) => handleDragEnd(e)}
|
||||
>
|
||||
{/* Drag handle */}
|
||||
{/* Drag handle - keyboard accessible */}
|
||||
<div
|
||||
className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground shrink-0 p-0.5"
|
||||
title="Drag to reorder"
|
||||
className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground focus:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded shrink-0 p-0.5"
|
||||
title="Drag to reorder (or use Arrow keys)"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label={`Reorder ${script.name || 'script'}. Use arrow keys to move.`}
|
||||
onKeyDown={(e) => handleDragHandleKeyDown(e, index)}
|
||||
>
|
||||
<GripVertical className="w-4 h-4" />
|
||||
</div>
|
||||
|
||||
@@ -588,7 +588,7 @@ export function TerminalView({
|
||||
|
||||
// Skip if we've already handled this exact request (prevents duplicate terminals)
|
||||
// Include mode and nonce in the key to allow opening same cwd multiple times
|
||||
const cwdKey = `${initialCwd}:${initialMode || 'default'}:${nonce || 0}`;
|
||||
const cwdKey = `${initialCwd}:${initialMode || 'default'}:${nonce || 0}:${initialCommand || ''}`;
|
||||
if (initialCwdHandledRef.current === cwdKey) return;
|
||||
|
||||
// Skip if terminal is not enabled or not unlocked
|
||||
@@ -1162,6 +1162,18 @@ export function TerminalView({
|
||||
// Always remove from UI - even if server says 404 (session may have already exited)
|
||||
removeTerminalFromLayout(sessionId);
|
||||
|
||||
// Clean up stale entries for killed sessions
|
||||
setSessionCommandOverrides((prev) => {
|
||||
const next = new Map(prev);
|
||||
next.delete(sessionId);
|
||||
return next;
|
||||
});
|
||||
setNewSessionIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(sessionId);
|
||||
return next;
|
||||
});
|
||||
|
||||
if (!response.ok && response.status !== 404) {
|
||||
// Log non-404 errors but still proceed with UI cleanup
|
||||
const data = await response.json().catch(() => ({}));
|
||||
@@ -1174,6 +1186,17 @@ export function TerminalView({
|
||||
logger.error('Kill session error:', err);
|
||||
// Still remove from UI on network error - better UX than leaving broken terminal
|
||||
removeTerminalFromLayout(sessionId);
|
||||
// Clean up stale entries for killed sessions (same cleanup as try block)
|
||||
setSessionCommandOverrides((prev) => {
|
||||
const next = new Map(prev);
|
||||
next.delete(sessionId);
|
||||
return next;
|
||||
});
|
||||
setNewSessionIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(sessionId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1208,6 +1231,22 @@ export function TerminalView({
|
||||
})
|
||||
);
|
||||
|
||||
// Clean up stale entries for all killed sessions in this tab
|
||||
setSessionCommandOverrides((prev) => {
|
||||
const next = new Map(prev);
|
||||
for (const sessionId of sessionIds) {
|
||||
next.delete(sessionId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
setNewSessionIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
for (const sessionId of sessionIds) {
|
||||
next.delete(sessionId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
|
||||
// Now remove the tab from state
|
||||
removeTerminalTab(tabId);
|
||||
// Refresh session count
|
||||
@@ -2025,6 +2064,13 @@ export function TerminalView({
|
||||
onFontSizeChange={(size) =>
|
||||
setTerminalPanelFontSize(terminalState.maximizedSessionId!, size)
|
||||
}
|
||||
runCommandOnConnect={
|
||||
newSessionIds.has(terminalState.maximizedSessionId)
|
||||
? sessionCommandOverrides.get(terminalState.maximizedSessionId) ||
|
||||
defaultRunScript
|
||||
: undefined
|
||||
}
|
||||
onCommandRan={() => handleCommandRan(terminalState.maximizedSessionId!)}
|
||||
isMaximized={true}
|
||||
onToggleMaximize={() => toggleTerminalMaximized(terminalState.maximizedSessionId!)}
|
||||
/>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
* automatic caching, deduplication, and background refetching.
|
||||
*/
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useMemo, useEffect, useRef } from 'react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { getElectronAPI } from '@/lib/electron';
|
||||
import { queryKeys } from '@/lib/query-keys';
|
||||
import { STALE_TIMES } from '@/lib/query-client';
|
||||
@@ -151,6 +151,34 @@ export function useFeatures(projectPath: string | undefined) {
|
||||
[projectPath]
|
||||
);
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Subscribe to React Query cache changes for features and sync to localStorage.
|
||||
// This ensures optimistic updates (e.g., status changes to 'verified') are
|
||||
// persisted to localStorage immediately, not just when queryFn runs.
|
||||
// Without this, a page refresh after an optimistic update could show stale
|
||||
// localStorage data where features appear in the wrong column (e.g., verified
|
||||
// features showing up in backlog).
|
||||
const projectPathRef = useRef(projectPath);
|
||||
projectPathRef.current = projectPath;
|
||||
useEffect(() => {
|
||||
if (!projectPath) return;
|
||||
const targetQueryHash = JSON.stringify(queryKeys.features.all(projectPath));
|
||||
const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
|
||||
if (
|
||||
event.type === 'updated' &&
|
||||
event.action.type === 'success' &&
|
||||
event.query.queryHash === targetQueryHash
|
||||
) {
|
||||
const features = event.query.state.data as Feature[] | undefined;
|
||||
if (features && projectPathRef.current) {
|
||||
writePersistedFeatures(projectPathRef.current, features);
|
||||
}
|
||||
}
|
||||
});
|
||||
return unsubscribe;
|
||||
}, [projectPath, queryClient]);
|
||||
|
||||
return useQuery({
|
||||
queryKey: queryKeys.features.all(projectPath ?? ''),
|
||||
queryFn: async (): Promise<Feature[]> => {
|
||||
@@ -166,7 +194,11 @@ export function useFeatures(projectPath: string | undefined) {
|
||||
},
|
||||
enabled: !!projectPath,
|
||||
initialData: () => persisted?.features,
|
||||
initialDataUpdatedAt: () => persisted?.timestamp,
|
||||
// Always treat localStorage cache as stale so React Query immediately
|
||||
// fetches fresh data from the server on page load. This prevents stale
|
||||
// feature statuses (e.g., 'verified' features appearing in backlog)
|
||||
// while still showing cached data instantly for a fast initial render.
|
||||
initialDataUpdatedAt: 0,
|
||||
staleTime: STALE_TIMES.FEATURES,
|
||||
refetchInterval: createSmartPollingInterval(FEATURES_POLLING_INTERVAL),
|
||||
refetchOnWindowFocus: FEATURES_REFETCH_ON_FOCUS,
|
||||
|
||||
@@ -100,6 +100,7 @@ const SETTINGS_FIELDS_TO_SYNC = [
|
||||
'projectHistory',
|
||||
'projectHistoryIndex',
|
||||
'lastSelectedSessionByProject',
|
||||
'currentWorktreeByProject',
|
||||
// Codex CLI Settings
|
||||
'codexAutoLoadAgents',
|
||||
'codexSandboxMode',
|
||||
@@ -768,6 +769,8 @@ export async function refreshSettingsFromServer(): Promise<boolean> {
|
||||
projectHistory: serverSettings.projectHistory,
|
||||
projectHistoryIndex: serverSettings.projectHistoryIndex,
|
||||
lastSelectedSessionByProject: serverSettings.lastSelectedSessionByProject,
|
||||
currentWorktreeByProject:
|
||||
serverSettings.currentWorktreeByProject ?? currentAppState.currentWorktreeByProject,
|
||||
// UI State (previously in localStorage)
|
||||
worktreePanelCollapsed: serverSettings.worktreePanelCollapsed ?? false,
|
||||
lastProjectDir: serverSettings.lastProjectDir ?? '',
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './app';
|
||||
import { AppErrorBoundary } from './components/ui/app-error-boundary';
|
||||
import { isMobileDevice, isPwaStandalone } from './lib/mobile-detect';
|
||||
|
||||
// Defensive fallback: index.html's inline script already applies data-pwa="standalone"
|
||||
@@ -250,8 +251,12 @@ function warmAssetCache(registration: ServiceWorkerRegistration): void {
|
||||
}
|
||||
|
||||
// Render the app - prioritize First Contentful Paint
|
||||
// AppErrorBoundary catches uncaught React errors and shows a friendly error screen
|
||||
// instead of TanStack Router's default "Something went wrong!" overlay.
|
||||
createRoot(document.getElementById('app')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
<AppErrorBoundary>
|
||||
<App />
|
||||
</AppErrorBoundary>
|
||||
</StrictMode>
|
||||
);
|
||||
|
||||
@@ -400,19 +400,16 @@ function RootLayoutContent() {
|
||||
useEffect(() => {
|
||||
const handleLoggedOut = () => {
|
||||
logger.warn('automaker:logged-out event received!');
|
||||
// Only update auth state — the centralized routing effect will handle
|
||||
// navigation to /logged-out when it detects isAuthenticated is false
|
||||
useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
|
||||
|
||||
if (location.pathname !== '/logged-out') {
|
||||
logger.warn('Navigating to /logged-out due to logged-out event');
|
||||
navigate({ to: '/logged-out' });
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('automaker:logged-out', handleLoggedOut);
|
||||
return () => {
|
||||
window.removeEventListener('automaker:logged-out', handleLoggedOut);
|
||||
};
|
||||
}, [location.pathname, navigate]);
|
||||
}, []);
|
||||
|
||||
// Global listener for server offline/connection errors.
|
||||
// This is triggered when a connection error is detected (e.g., server stopped).
|
||||
@@ -724,33 +721,31 @@ function RootLayoutContent() {
|
||||
}
|
||||
|
||||
// If we can't load settings, we must NOT start syncing defaults to the server.
|
||||
// Only update auth state — the routing effect handles navigation to /logged-out.
|
||||
// Calling navigate() here AND in the routing effect causes duplicate navigations
|
||||
// that can trigger React error #185 (maximum update depth exceeded) on cold start.
|
||||
useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
|
||||
signalMigrationComplete();
|
||||
if (location.pathname !== '/logged-out' && location.pathname !== '/login') {
|
||||
navigate({ to: '/logged-out' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// Session is definitively invalid (server returned 401/403) - treat as not authenticated
|
||||
// Session is definitively invalid (server returned 401/403) - treat as not authenticated.
|
||||
// Only update auth state — the routing effect handles navigation to /logged-out.
|
||||
// Calling navigate() here AND in the routing effect causes duplicate navigations
|
||||
// that can trigger React error #185 (maximum update depth exceeded) on cold start.
|
||||
useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
|
||||
// Signal migration complete so sync hook doesn't hang (nothing to sync when not authenticated)
|
||||
signalMigrationComplete();
|
||||
|
||||
// Redirect to logged-out if not already there or login
|
||||
if (location.pathname !== '/logged-out' && location.pathname !== '/login') {
|
||||
navigate({ to: '/logged-out' });
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Failed to initialize auth:', error);
|
||||
// On error, treat as not authenticated
|
||||
// On error, treat as not authenticated.
|
||||
// Only update auth state — the routing effect handles navigation to /logged-out.
|
||||
// Calling navigate() here AND in the routing effect causes duplicate navigations
|
||||
// that can trigger React error #185 (maximum update depth exceeded) on cold start.
|
||||
useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
|
||||
// Signal migration complete so sync hook doesn't hang
|
||||
signalMigrationComplete();
|
||||
if (location.pathname !== '/logged-out' && location.pathname !== '/login') {
|
||||
navigate({ to: '/logged-out' });
|
||||
}
|
||||
} finally {
|
||||
authCheckRunning.current = false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user