Bohdan Triapitsyn
6cd71bdfe5
Promote the last plain-prompt draft chip into a proper /explore command so all draft welcome presets are now commands. Its hidden prompt investigates the repository and gives a structured orientation — big picture, main modules, how they connect, conventions, and where to start — instead of a file-by-file dump. Follows the established pattern: visible + hidden magic prompts wired into command autocomplete, the submit handler, the draft chip, and the Magic Prompts settings page, with i18n across all locales. Drops the now-unused explore prompt string.
418 lines
18 KiB
TypeScript
418 lines
18 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { toast } from '@/components/ui';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { Icon } from "@/components/icon/Icon";
|
|
import {
|
|
fetchMagicPromptOverrides,
|
|
getDefaultMagicPromptTemplate,
|
|
getMagicPromptDefinition,
|
|
resetAllMagicPromptOverrides,
|
|
resetMagicPromptOverride,
|
|
saveMagicPromptOverride,
|
|
type MagicPromptId,
|
|
} from '@/lib/magicPrompts';
|
|
import { useMagicPromptsStore } from '@/stores/useMagicPromptsStore';
|
|
import { useI18n } from '@/lib/i18n';
|
|
|
|
type PromptBlock = {
|
|
id: MagicPromptId;
|
|
titleKey: string;
|
|
};
|
|
|
|
type PromptPageConfig = {
|
|
titleKey: string;
|
|
descriptionKey: string;
|
|
blocks: PromptBlock[];
|
|
};
|
|
|
|
const PROMPT_PAGE_MAP: Record<string, PromptPageConfig> = {
|
|
'git.commit.generate': {
|
|
titleKey: 'settings.magicPrompts.page.group.gitCommitGenerate.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.gitCommitGenerate.description',
|
|
blocks: [
|
|
{ id: 'git.commit.generate.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'git.commit.generate.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'git.pr.generate': {
|
|
titleKey: 'settings.magicPrompts.page.group.gitPrGenerate.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.gitPrGenerate.description',
|
|
blocks: [
|
|
{ id: 'git.pr.generate.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'git.pr.generate.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'github.pr.review': {
|
|
titleKey: 'settings.magicPrompts.page.group.githubPrReview.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.githubPrReview.description',
|
|
blocks: [
|
|
{ id: 'github.pr.review.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'github.pr.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'github.issue.review': {
|
|
titleKey: 'settings.magicPrompts.page.group.githubIssueReview.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.githubIssueReview.description',
|
|
blocks: [
|
|
{ id: 'github.issue.review.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'github.issue.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'github.pr.checks.review': {
|
|
titleKey: 'settings.magicPrompts.page.group.githubPrFailedChecksReview.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.githubPrFailedChecksReview.description',
|
|
blocks: [
|
|
{ id: 'github.pr.checks.review.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'github.pr.checks.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'github.pr.comments.review': {
|
|
titleKey: 'settings.magicPrompts.page.group.githubPrCommentsReview.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.githubPrCommentsReview.description',
|
|
blocks: [
|
|
{ id: 'github.pr.comments.review.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'github.pr.comments.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'github.pr.comment.single': {
|
|
titleKey: 'settings.magicPrompts.page.group.githubSinglePrCommentReview.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.githubSinglePrCommentReview.description',
|
|
blocks: [
|
|
{ id: 'github.pr.comment.single.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'github.pr.comment.single.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'git.conflict.resolve': {
|
|
titleKey: 'settings.magicPrompts.page.group.gitConflictResolve.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.gitConflictResolve.description',
|
|
blocks: [
|
|
{ id: 'git.conflict.resolve.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'git.conflict.resolve.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'git.integrate.cherrypick.resolve': {
|
|
titleKey: 'settings.magicPrompts.page.group.gitCherrypickConflictResolve.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.gitCherrypickConflictResolve.description',
|
|
blocks: [
|
|
{ id: 'git.integrate.cherrypick.resolve.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'git.integrate.cherrypick.resolve.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'plan.improve': {
|
|
titleKey: 'settings.magicPrompts.page.group.planImprove.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.planImprove.description',
|
|
blocks: [
|
|
{ id: 'plan.improve.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'plan.improve.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'plan.todo': {
|
|
titleKey: 'settings.magicPrompts.page.group.planTodo.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.planTodo.description',
|
|
blocks: [
|
|
{ id: 'plan.todo.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'plan.todo.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'plan.implement': {
|
|
titleKey: 'settings.magicPrompts.page.group.planImplement.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.planImplement.description',
|
|
blocks: [
|
|
{ id: 'plan.implement.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'plan.implement.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'session.summary': {
|
|
titleKey: 'settings.magicPrompts.page.group.sessionSummary.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.sessionSummary.description',
|
|
blocks: [
|
|
{ id: 'session.summary.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'session.summary.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'session.review': {
|
|
titleKey: 'settings.magicPrompts.page.group.sessionWorkspaceReview.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.sessionWorkspaceReview.description',
|
|
blocks: [
|
|
{ id: 'session.review.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'session.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'session.plan': {
|
|
titleKey: 'settings.magicPrompts.page.group.sessionFeaturePlan.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.sessionFeaturePlan.description',
|
|
blocks: [
|
|
{ id: 'session.plan.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'session.plan.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'session.catchup': {
|
|
titleKey: 'settings.magicPrompts.page.group.sessionCatchUp.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.sessionCatchUp.description',
|
|
blocks: [
|
|
{ id: 'session.catchup.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'session.catchup.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'session.debug': {
|
|
titleKey: 'settings.magicPrompts.page.group.sessionDebug.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.sessionDebug.description',
|
|
blocks: [
|
|
{ id: 'session.debug.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'session.debug.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'session.weigh': {
|
|
titleKey: 'settings.magicPrompts.page.group.sessionWeigh.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.sessionWeigh.description',
|
|
blocks: [
|
|
{ id: 'session.weigh.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'session.weigh.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'session.explore': {
|
|
titleKey: 'settings.magicPrompts.page.group.sessionExplore.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.sessionExplore.description',
|
|
blocks: [
|
|
{ id: 'session.explore.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'session.explore.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
'session.fusion': {
|
|
titleKey: 'settings.magicPrompts.page.group.sessionFusion.title',
|
|
descriptionKey: 'settings.magicPrompts.page.group.sessionFusion.description',
|
|
blocks: [
|
|
{ id: 'session.fusion.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
|
|
{ id: 'session.fusion.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
|
|
],
|
|
},
|
|
};
|
|
|
|
const hasOwn = (input: Record<string, string>, key: string) => Object.prototype.hasOwnProperty.call(input, key);
|
|
const isVisiblePromptId = (id: MagicPromptId): boolean => id.endsWith('.visible');
|
|
|
|
export const MagicPromptsPage: React.FC = () => {
|
|
const { t } = useI18n();
|
|
const tUnsafe = React.useCallback((key: string) => t(key as Parameters<typeof t>[0]), [t]);
|
|
const selectedPromptId = useMagicPromptsStore((state) => state.selectedPromptId);
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [overrides, setOverrides] = React.useState<Record<string, string>>({});
|
|
const [drafts, setDrafts] = React.useState<Record<string, string>>({});
|
|
const [savingIds, setSavingIds] = React.useState<Record<string, boolean>>({});
|
|
const [resettingIds, setResettingIds] = React.useState<Record<string, boolean>>({});
|
|
const [resettingAll, setResettingAll] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
let active = true;
|
|
const load = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const nextOverrides = await fetchMagicPromptOverrides();
|
|
if (!active) return;
|
|
setOverrides(nextOverrides);
|
|
} catch (error) {
|
|
console.warn('Failed to load magic prompts:', error);
|
|
toast.error(t('settings.magicPrompts.page.toast.loadFailed'));
|
|
} finally {
|
|
if (active) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
};
|
|
void load();
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [t]);
|
|
|
|
const pageConfig = PROMPT_PAGE_MAP[selectedPromptId] ?? PROMPT_PAGE_MAP['git.commit.generate'];
|
|
const getBaseline = React.useCallback((id: MagicPromptId) => {
|
|
return hasOwn(overrides, id) ? overrides[id] : getDefaultMagicPromptTemplate(id);
|
|
}, [overrides]);
|
|
|
|
const getDraft = React.useCallback((id: MagicPromptId) => {
|
|
return drafts[id] ?? getBaseline(id);
|
|
}, [drafts, getBaseline]);
|
|
|
|
const setDraft = React.useCallback((id: MagicPromptId, value: string) => {
|
|
setDrafts((current) => {
|
|
if (current[id] === value) {
|
|
return current;
|
|
}
|
|
return { ...current, [id]: value };
|
|
});
|
|
}, []);
|
|
|
|
const savePrompt = React.useCallback(async (id: MagicPromptId) => {
|
|
const value = getDraft(id);
|
|
if (isVisiblePromptId(id) && value.trim().length === 0) {
|
|
toast.error(t('settings.magicPrompts.page.toast.visiblePromptRequired'));
|
|
return;
|
|
}
|
|
setSavingIds((current) => ({ ...current, [id]: true }));
|
|
try {
|
|
const payload = value === getDefaultMagicPromptTemplate(id)
|
|
? await resetMagicPromptOverride(id)
|
|
: await saveMagicPromptOverride(id, value);
|
|
setOverrides(payload.overrides);
|
|
toast.success(t('settings.magicPrompts.page.toast.saved'));
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : String(error);
|
|
toast.error(t('settings.magicPrompts.page.toast.saveFailed'), { description: message });
|
|
} finally {
|
|
setSavingIds((current) => ({ ...current, [id]: false }));
|
|
}
|
|
}, [getDraft, t]);
|
|
|
|
const resetPrompt = React.useCallback(async (id: MagicPromptId) => {
|
|
setResettingIds((current) => ({ ...current, [id]: true }));
|
|
try {
|
|
const payload = await resetMagicPromptOverride(id);
|
|
setOverrides(payload.overrides);
|
|
setDrafts((current) => ({
|
|
...current,
|
|
[id]: getDefaultMagicPromptTemplate(id),
|
|
}));
|
|
toast.success(t('settings.magicPrompts.page.toast.resetSuccess'));
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : String(error);
|
|
toast.error(t('settings.magicPrompts.page.toast.resetFailed'), { description: message });
|
|
} finally {
|
|
setResettingIds((current) => ({ ...current, [id]: false }));
|
|
}
|
|
}, [t]);
|
|
|
|
const handleResetAll = React.useCallback(async () => {
|
|
setResettingAll(true);
|
|
try {
|
|
const payload = await resetAllMagicPromptOverrides();
|
|
setOverrides(payload.overrides);
|
|
setDrafts({});
|
|
toast.success(t('settings.magicPrompts.page.toast.resetAllSuccess'));
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : String(error);
|
|
toast.error(t('settings.magicPrompts.page.toast.resetAllFailed'), { description: message });
|
|
} finally {
|
|
setResettingAll(false);
|
|
}
|
|
}, [t]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="py-6 px-6 flex items-center gap-2 text-muted-foreground">
|
|
<span className="inline-block h-1.5 w-1.5 rounded-full bg-current animate-busy-pulse" aria-label={t('settings.magicPrompts.page.loading.aria')} />
|
|
<span className="typography-ui">{t('settings.magicPrompts.page.loading.text')}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full overflow-auto">
|
|
<div className="mx-auto w-full max-w-4xl px-6 py-6 space-y-4">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="typography-ui-header font-semibold text-foreground">{tUnsafe(pageConfig.titleKey)}</h2>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Icon name="information" className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
|
|
</TooltipTrigger>
|
|
<TooltipContent sideOffset={8} className="max-w-xs">
|
|
{tUnsafe(pageConfig.descriptionKey)}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
void handleResetAll();
|
|
}}
|
|
disabled={resettingAll || Object.keys(overrides).length === 0}
|
|
>
|
|
{resettingAll ? t('settings.magicPrompts.page.actions.resetting') : t('settings.magicPrompts.page.actions.resetAllOverrides')}
|
|
</Button>
|
|
</div>
|
|
|
|
{pageConfig.blocks.map((block, index) => {
|
|
const definition = getMagicPromptDefinition(block.id);
|
|
const baseline = getBaseline(block.id);
|
|
const draft = getDraft(block.id);
|
|
const isOverridden = hasOwn(overrides, block.id);
|
|
const isDirty = draft !== baseline;
|
|
const isInvalidEmptyVisiblePrompt = isVisiblePromptId(block.id) && draft.trim().length === 0;
|
|
const saving = savingIds[block.id] === true;
|
|
const resetting = resettingIds[block.id] === true;
|
|
|
|
return (
|
|
<section key={block.id} className={index > 0 ? 'space-y-3 pt-5 border-t border-border' : 'space-y-3'}>
|
|
<div className="space-y-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h3 className="typography-ui-label text-foreground">{tUnsafe(block.titleKey)}</h3>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Icon name="information" className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
|
|
</TooltipTrigger>
|
|
<TooltipContent sideOffset={8} className="max-w-xs">
|
|
{definition.description}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
{definition.placeholders && definition.placeholders.length > 0 && (
|
|
<div className="typography-micro text-muted-foreground">
|
|
{t('settings.magicPrompts.page.placeholdersLabel')}{' '}
|
|
{definition.placeholders.map((item) => `{{${item.key}}}`).join(', ')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Textarea
|
|
value={draft}
|
|
onChange={(event) => setDraft(block.id, event.target.value)}
|
|
className="min-h-[220px] font-mono text-sm"
|
|
/>
|
|
{isInvalidEmptyVisiblePrompt && (
|
|
<div className="typography-micro text-[var(--status-error)]">{t('settings.magicPrompts.page.validation.visiblePromptRequired')}</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="typography-micro text-muted-foreground">
|
|
{isDirty
|
|
? t('settings.magicPrompts.page.status.unsavedChanges')
|
|
: isOverridden
|
|
? t('settings.magicPrompts.page.status.usingSavedOverride')
|
|
: t('settings.magicPrompts.page.status.usingBuiltinDefault')}
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
void resetPrompt(block.id);
|
|
}}
|
|
disabled={!isOverridden || saving || resetting}
|
|
>
|
|
{resetting ? t('settings.magicPrompts.page.actions.resetting') : t('settings.magicPrompts.page.actions.resetToDefault')}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => {
|
|
void savePrompt(block.id);
|
|
}}
|
|
disabled={!isDirty || saving || resetting || isInvalidEmptyVisiblePrompt}
|
|
>
|
|
{saving ? t('settings.common.actions.saving') : t('settings.magicPrompts.page.actions.save')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|