feat: massive chat reliability + UX pass (web/desktop/mobile/vscode) (#593)
## Added Features - Add VS Code save-as-image flow for assistant messages via webview bridge + native save dialog. - Add hourly desktop update checks after startup. - Add new tool output display mode: `Changes` (auto-expand edit/write/patch only; keep activity expanded; mode guidance text). - Add GitHub PR attachment flow in chat input with PR picker + attached PR chip/details. - Add mobile overlay presentation for GitHub Issue and PR pickers (shared with desktop picker content). ## Fixes - Save-gate project icon updates until explicit Save; allow icon removal with same save-gated behavior. - Restore clickable chat action buttons in sticky header mode (desktop + Firefox hit-target issue). - Clamp sticky user messages to bounded chat height and allow internal scrolling. - Prevent drawer context crash during iPad/tablet orientation switching. - Improve text-selection action menu placement on narrow screens. - Move assistant message time into clock tooltip; keep duration display clean. - Hide `Link GitHub Issue` row in VS Code chat input area (GitHub flow is not yet ready there). - Remove laggy close animation in text-selection popover; keep open motion/positioning behavior. - Fetch branches when picker opens and cache empty; show loading state instead of false “No branches found”. - Fix share-image export metadata rendering (theme background resolution, timestamp rendering, footer alignment). - Scope MCP services status/toggles to active directory to avoid cross-project leakage. - Improve long user-message clamp behavior (40% cap variant, hidden scrollbar, scroll shadows, expansion detection). - Fix desktop `Check for Updates` menu handler; prevent duplicate checks; show clear success/error toasts. - Stabilize long user-message scrolling behavior (follow-up hardening). - Avoid premature web update failure on slower servers. - Restore user message image previews + fullscreen gallery navigation payload. - Repair desktop chat drag-and-drop image attachments when native drop coords are missing. - Move GitHub issue linking entry into Add attachment menu. - Align header context usage percentage visuals with context panel. - Align `@` file search with active project in all runtimes. - Route `@` file discovery through OpenCode SDK `find.files`; remove legacy `/api/fs/search` reliance. - Make chat `@` mention behavior consistent with files-style behavior. - Keep status-row todos in stable order after status changes; add compact status icons; replace noisy priority labels. ## Refactors / UX Consistency - Simplify chat attachment model and remove project file picker path. - Keep composer focused on `@` mention file flow. - Use direct `Attach files` action in VS Code instead of attachment dropdown path. - Unify issue/PR picker behavior between desktop and mobile overlays.
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
ca18b8be0f
commit
79143bff4c
@@ -309,6 +309,9 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
|
||||
const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
|
||||
const showDesktopHeaderContextUsage = !isVSCode && activeMainTab === 'chat' && !!stableDesktopContextUsage && stableDesktopContextUsage.totalTokens > 0;
|
||||
const desktopHeaderDisplayPercentage = stableDesktopContextUsage && stableDesktopContextUsage.contextLimit > 0
|
||||
? Math.min(999, (stableDesktopContextUsage.totalTokens / stableDesktopContextUsage.contextLimit) * 100)
|
||||
: 0;
|
||||
|
||||
const refreshCurrentInstanceLabel = React.useCallback(async () => {
|
||||
if (typeof window === 'undefined' || !isDesktopApp) {
|
||||
@@ -1063,7 +1066,8 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
{showDesktopHeaderContextUsage && stableDesktopContextUsage && (
|
||||
<ContextUsageDisplay
|
||||
totalTokens={stableDesktopContextUsage.totalTokens}
|
||||
percentage={stableDesktopContextUsage.percentage}
|
||||
percentage={desktopHeaderDisplayPercentage}
|
||||
colorPercentage={stableDesktopContextUsage.percentage}
|
||||
contextLimit={stableDesktopContextUsage.contextLimit}
|
||||
outputLimit={stableDesktopContextUsage.outputLimit ?? 0}
|
||||
size="compact"
|
||||
|
||||
@@ -144,13 +144,24 @@ export const MainLayout: React.FC = () => {
|
||||
}
|
||||
}, [isRightSidebarOpen, isMobile]);
|
||||
|
||||
// Trigger update check 3 seconds after mount (for both mobile and desktop)
|
||||
// Trigger initial update check shortly after mount, then every hour.
|
||||
const checkForUpdates = useUpdateStore((state) => state.checkForUpdates);
|
||||
React.useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
const initialDelayMs = 3000;
|
||||
const periodicIntervalMs = 60 * 60 * 1000;
|
||||
|
||||
const timer = window.setTimeout(() => {
|
||||
checkForUpdates();
|
||||
}, 3000);
|
||||
return () => clearTimeout(timer);
|
||||
}, initialDelayMs);
|
||||
|
||||
const interval = window.setInterval(() => {
|
||||
checkForUpdates();
|
||||
}, periodicIntervalMs);
|
||||
|
||||
return () => {
|
||||
window.clearTimeout(timer);
|
||||
window.clearInterval(interval);
|
||||
};
|
||||
}, [checkForUpdates]);
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
@@ -60,79 +60,147 @@ export const ProjectEditDialog: React.FC<ProjectEditDialogProps> = ({
|
||||
const [isUploadingIcon, setIsUploadingIcon] = React.useState(false);
|
||||
const [isRemovingCustomIcon, setIsRemovingCustomIcon] = React.useState(false);
|
||||
const [isDiscoveringIcon, setIsDiscoveringIcon] = React.useState(false);
|
||||
const [pendingRemoveImageIcon, setPendingRemoveImageIcon] = React.useState(false);
|
||||
const [pendingUploadIconFile, setPendingUploadIconFile] = React.useState<File | null>(null);
|
||||
const [pendingUploadIconPreviewUrl, setPendingUploadIconPreviewUrl] = React.useState<string | null>(null);
|
||||
const [previewImageFailed, setPreviewImageFailed] = React.useState(false);
|
||||
const fileInputRef = React.useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const clearPendingUploadIcon = React.useCallback(() => {
|
||||
setPendingUploadIconFile(null);
|
||||
setPendingUploadIconPreviewUrl((previousUrl) => {
|
||||
if (previousUrl) {
|
||||
URL.revokeObjectURL(previousUrl);
|
||||
}
|
||||
return null;
|
||||
});
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
setName(projectName);
|
||||
setIcon(initialIcon);
|
||||
setColor(initialColor);
|
||||
setIconBackground(normalizeIconBackground(initialIconBackground));
|
||||
setPendingRemoveImageIcon(false);
|
||||
clearPendingUploadIcon();
|
||||
setPreviewImageFailed(false);
|
||||
}
|
||||
}, [open, projectName, initialIcon, initialColor, initialIconBackground]);
|
||||
}, [open, projectName, initialIcon, initialColor, initialIconBackground, clearPendingUploadIcon]);
|
||||
|
||||
const handleSave = () => {
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
clearPendingUploadIcon();
|
||||
};
|
||||
}, [clearPendingUploadIcon]);
|
||||
|
||||
const handleSave = async () => {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) return;
|
||||
onSave({ label: trimmed, icon, color, iconBackground: normalizeIconBackground(iconBackground) });
|
||||
|
||||
if (pendingUploadIconFile) {
|
||||
setIsUploadingIcon(true);
|
||||
const uploadResult = await uploadProjectIcon(projectId, pendingUploadIconFile);
|
||||
setIsUploadingIcon(false);
|
||||
if (!uploadResult.ok) {
|
||||
toast.error(uploadResult.error || 'Failed to upload project icon');
|
||||
return;
|
||||
}
|
||||
toast.success('Project icon updated');
|
||||
clearPendingUploadIcon();
|
||||
setPendingRemoveImageIcon(false);
|
||||
}
|
||||
|
||||
const willRemoveImageIcon = pendingRemoveImageIcon && hasStoredImageIcon;
|
||||
|
||||
if (willRemoveImageIcon) {
|
||||
setIsRemovingCustomIcon(true);
|
||||
const result = await removeProjectIcon(projectId);
|
||||
setIsRemovingCustomIcon(false);
|
||||
if (!result.ok) {
|
||||
toast.error(result.error || 'Failed to remove project icon');
|
||||
return;
|
||||
}
|
||||
toast.success('Project icon removed');
|
||||
setPendingRemoveImageIcon(false);
|
||||
setIconBackground(null);
|
||||
}
|
||||
|
||||
onSave({
|
||||
label: trimmed,
|
||||
icon,
|
||||
color,
|
||||
iconBackground: normalizeIconBackground(willRemoveImageIcon ? null : iconBackground),
|
||||
});
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const currentColorVar = color ? (PROJECT_COLOR_MAP[color] ?? null) : null;
|
||||
const hasImageIcon = Boolean(currentIconImage);
|
||||
const hasStoredImageIcon = Boolean(currentIconImage);
|
||||
const hasPendingUploadImageIcon = Boolean(pendingUploadIconFile && pendingUploadIconPreviewUrl);
|
||||
const hasCustomIcon = currentIconImage?.source === 'custom';
|
||||
const iconPreviewUrl = hasImageIcon && !previewImageFailed
|
||||
? getProjectIconImageUrl({ id: projectId, iconImage: currentIconImage ?? null })
|
||||
const effectiveHasImageIcon = (hasStoredImageIcon && !pendingRemoveImageIcon) || hasPendingUploadImageIcon;
|
||||
const hasRemovableImageIcon = effectiveHasImageIcon;
|
||||
const iconPreviewUrl = !previewImageFailed
|
||||
? (hasPendingUploadImageIcon
|
||||
? pendingUploadIconPreviewUrl
|
||||
: (hasStoredImageIcon && !pendingRemoveImageIcon
|
||||
? getProjectIconImageUrl({ id: projectId, iconImage: currentIconImage ?? null })
|
||||
: null))
|
||||
: null;
|
||||
|
||||
React.useEffect(() => {
|
||||
setPreviewImageFailed(false);
|
||||
}, [projectId, currentIconImage?.updatedAt]);
|
||||
|
||||
const handleUploadIcon = React.useCallback(async (file: File | null) => {
|
||||
const handleUploadIcon = React.useCallback((file: File | null) => {
|
||||
if (!projectId || !file || isUploadingIcon) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsUploadingIcon(true);
|
||||
void uploadProjectIcon(projectId, file)
|
||||
.then((result) => {
|
||||
if (!result.ok) {
|
||||
toast.error(result.error || 'Failed to upload project icon');
|
||||
return;
|
||||
}
|
||||
toast.success('Project icon updated');
|
||||
})
|
||||
.finally(() => {
|
||||
setIsUploadingIcon(false);
|
||||
});
|
||||
}, [isUploadingIcon, projectId, uploadProjectIcon]);
|
||||
setPendingRemoveImageIcon(false);
|
||||
setPreviewImageFailed(false);
|
||||
setPendingUploadIconFile(file);
|
||||
setPendingUploadIconPreviewUrl((previousUrl) => {
|
||||
if (previousUrl) {
|
||||
URL.revokeObjectURL(previousUrl);
|
||||
}
|
||||
return URL.createObjectURL(file);
|
||||
});
|
||||
}, [isUploadingIcon, projectId]);
|
||||
|
||||
const handleRemoveCustomIcon = React.useCallback(async () => {
|
||||
if (!projectId || !hasCustomIcon || isRemovingCustomIcon) {
|
||||
const handleRemoveImageIcon = React.useCallback(() => {
|
||||
if (!projectId || !hasRemovableImageIcon || isRemovingCustomIcon) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsRemovingCustomIcon(true);
|
||||
void removeProjectIcon(projectId)
|
||||
.then((result) => {
|
||||
if (!result.ok) {
|
||||
toast.error(result.error || 'Failed to remove project icon');
|
||||
return;
|
||||
}
|
||||
toast.success('Custom project icon removed');
|
||||
})
|
||||
.finally(() => {
|
||||
setIsRemovingCustomIcon(false);
|
||||
});
|
||||
}, [hasCustomIcon, isRemovingCustomIcon, projectId, removeProjectIcon]);
|
||||
if (hasPendingUploadImageIcon) {
|
||||
clearPendingUploadIcon();
|
||||
}
|
||||
if (hasStoredImageIcon) {
|
||||
setPendingRemoveImageIcon(true);
|
||||
} else {
|
||||
setPendingRemoveImageIcon(false);
|
||||
}
|
||||
setPreviewImageFailed(false);
|
||||
}, [
|
||||
clearPendingUploadIcon,
|
||||
hasPendingUploadImageIcon,
|
||||
hasRemovableImageIcon,
|
||||
hasStoredImageIcon,
|
||||
isRemovingCustomIcon,
|
||||
projectId,
|
||||
]);
|
||||
|
||||
const handleDiscoverIcon = React.useCallback(async () => {
|
||||
if (!projectId || isDiscoveringIcon) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearPendingUploadIcon();
|
||||
setPendingRemoveImageIcon(false);
|
||||
setPreviewImageFailed(false);
|
||||
|
||||
setIsDiscoveringIcon(true);
|
||||
void discoverProjectIcon(projectId)
|
||||
.then((result) => {
|
||||
@@ -149,7 +217,7 @@ export const ProjectEditDialog: React.FC<ProjectEditDialogProps> = ({
|
||||
.finally(() => {
|
||||
setIsDiscoveringIcon(false);
|
||||
});
|
||||
}, [discoverProjectIcon, isDiscoveringIcon, projectId]);
|
||||
}, [clearPendingUploadIcon, discoverProjectIcon, isDiscoveringIcon, projectId]);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
@@ -273,7 +341,7 @@ export const ProjectEditDialog: React.FC<ProjectEditDialogProps> = ({
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{hasImageIcon && iconPreviewUrl && (
|
||||
{effectiveHasImageIcon && iconPreviewUrl && (
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<span className="typography-meta text-muted-foreground">Preview</span>
|
||||
<span className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border/60 bg-[var(--surface-elevated)] p-1">
|
||||
@@ -303,15 +371,20 @@ export const ProjectEditDialog: React.FC<ProjectEditDialogProps> = ({
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{hasCustomIcon && (
|
||||
<Button size="sm" variant="outline" onClick={() => void handleRemoveCustomIcon()} disabled={isRemovingCustomIcon}>
|
||||
{isRemovingCustomIcon ? 'Removing...' : 'Remove Custom Icon'}
|
||||
{hasRemovableImageIcon && (
|
||||
<Button size="sm" variant="outline" onClick={() => void handleRemoveImageIcon()} disabled={isRemovingCustomIcon}>
|
||||
{isRemovingCustomIcon ? 'Removing...' : 'Remove Project Icon'}
|
||||
</Button>
|
||||
)}
|
||||
{pendingRemoveImageIcon && (
|
||||
<Button size="sm" variant="outline" onClick={() => setPendingRemoveImageIcon(false)} disabled={isRemovingCustomIcon}>
|
||||
Undo Remove
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasImageIcon && (
|
||||
{effectiveHasImageIcon && (
|
||||
<div className="min-w-0 space-y-2">
|
||||
<label className="typography-ui-label font-medium text-foreground">
|
||||
Icon Background
|
||||
@@ -342,7 +415,7 @@ export const ProjectEditDialog: React.FC<ProjectEditDialogProps> = ({
|
||||
<Button variant="ghost" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={!name.trim()}>
|
||||
<Button onClick={handleSave} disabled={!name.trim() || isUploadingIcon || isRemovingCustomIcon}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
||||
@@ -446,50 +446,6 @@ export const SidebarFilesTree: React.FC = () => {
|
||||
|
||||
// --- Fuzzy search scoring (matching FilesView) ---
|
||||
|
||||
const fuzzyScore = React.useCallback((query: string, candidate: string): number | null => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return 0;
|
||||
|
||||
const c = candidate.toLowerCase();
|
||||
let score = 0;
|
||||
let lastIndex = -1;
|
||||
let consecutive = 0;
|
||||
|
||||
for (let i = 0; i < q.length; i += 1) {
|
||||
const ch = q[i];
|
||||
if (!ch || ch === ' ') continue;
|
||||
|
||||
const idx = c.indexOf(ch, lastIndex + 1);
|
||||
if (idx === -1) return null;
|
||||
|
||||
const gap = idx - lastIndex - 1;
|
||||
if (gap === 0) {
|
||||
consecutive += 1;
|
||||
} else {
|
||||
consecutive = 0;
|
||||
}
|
||||
|
||||
score += 10;
|
||||
score += Math.max(0, 18 - idx);
|
||||
score -= Math.max(0, gap);
|
||||
|
||||
if (idx === 0) {
|
||||
score += 12;
|
||||
} else {
|
||||
const prev = c[idx - 1];
|
||||
if (prev === '/' || prev === '_' || prev === '-' || prev === '.' || prev === ' ') {
|
||||
score += 10;
|
||||
}
|
||||
}
|
||||
|
||||
score += consecutive > 0 ? 12 : 0;
|
||||
lastIndex = idx;
|
||||
}
|
||||
|
||||
score += Math.max(0, 24 - Math.round(c.length / 3));
|
||||
return score;
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!currentDirectory) {
|
||||
setSearchResults([]);
|
||||
@@ -504,34 +460,20 @@ export const SidebarFilesTree: React.FC = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
const normalizedQueryLower = trimmedQuery.toLowerCase();
|
||||
let cancelled = false;
|
||||
setSearching(true);
|
||||
|
||||
searchFiles(currentDirectory, trimmedQuery, 150, {
|
||||
includeHidden: showHidden,
|
||||
respectGitignore: !showGitignored,
|
||||
type: 'file',
|
||||
})
|
||||
.then((hits) => {
|
||||
if (cancelled) return;
|
||||
|
||||
const filtered = hits.filter((hit) => showGitignored || !shouldIgnorePath(hit.path));
|
||||
|
||||
const ranked = filtered
|
||||
.map((hit) => {
|
||||
const label = hit.relativePath || hit.name || hit.path;
|
||||
const score = fuzzyScore(normalizedQueryLower, label);
|
||||
return score === null ? null : { hit, score, labelLength: label.length };
|
||||
})
|
||||
.filter(Boolean) as Array<{ hit: typeof hits[0]; score: number; labelLength: number }>;
|
||||
|
||||
ranked.sort((a, b) => (
|
||||
b.score - a.score
|
||||
|| a.labelLength - b.labelLength
|
||||
|| a.hit.path.localeCompare(b.hit.path)
|
||||
));
|
||||
|
||||
const mapped: FileNode[] = ranked.map(({ hit }) => ({
|
||||
const mapped: FileNode[] = filtered.map((hit) => ({
|
||||
name: hit.name,
|
||||
path: normalizePath(hit.path),
|
||||
type: 'file',
|
||||
@@ -555,7 +497,7 @@ export const SidebarFilesTree: React.FC = () => {
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [currentDirectory, debouncedSearchQuery, fuzzyScore, searchFiles, showHidden, showGitignored]);
|
||||
}, [currentDirectory, debouncedSearchQuery, searchFiles, showHidden, showGitignored]);
|
||||
|
||||
// --- Git status helpers (matching FilesView) ---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user