feat: fork-aware issue/PR listing & OpenCode startup loading indicator (#1061)
* Add design spec: OpenCode readiness loading indicator * Add implementation plan: OpenCode readiness loading indicator * feat: add useOpenCodeReadiness hook * feat: add i18n keys for common.loading * feat: add loading state to ModelSelector * feat: add loading state to AgentSelector * feat: add loading state to ModelControls chat selectors * update package-lock * feat(github): add shared fork detection utility * feat(github): make issue listing fork-aware * feat(github): make PR listing fork-aware * feat(types): add sourceRepo to issue/PR summary types * feat(ui): add source badges to GitHub integration dialog * feat(ui): add source badges to issue/PR picker dialogs * feat(github): pass headRemote in PR creation for fork support * feat(ui): add source→target label in PR tab for fork workflows * fix(github): allow PR section on base branch when upstream remote exists * fix(github): show PR section on any branch including main for fork→upstream PRs * fix(github): allow PullRequestSection to render on base branch when upstream remote exists * feat(github): auto-detect upstream repo for fork→upstream PR creation - Add GET /api/github/repo/upstream endpoint to discover fork's upstream - Fix PullRequestSection canShow to allow PR creation on base branch when repo is a fork - Add virtual upstream target in remote dropdown (no explicit upstream remote needed) - Add targetRepo parameter to /api/github/pr/create for direct upstream targeting - Add repoUpstream() API client method and GitHubRepoUpstreamResult type * feat(github): auto-detect upstream repo for fork→upstream PR creation - Add GET /api/github/repo/upstream endpoint to discover fork's upstream - Fix PullRequestSection canShow to allow PR creation on base branch when repo is a fork - Add virtual upstream target in remote dropdown (no explicit upstream remote needed) - Add targetRepo parameter to /api/github/pr/create for direct upstream targeting - Add repoUpstream() API client method and GitHubRepoUpstreamResult type * fix: complete fork→upstream PR workflow - Server: return defaultBranch from /api/github/repo/upstream endpoint - Server: fix cross-repo head ref construction (compare repos, not remote names) - Server: filterActiveRemoteBranches checks all remotes, not just origin - UI: set targetBaseBranch to upstream's default branch when using detected upstream - UI: include all remote branches in base branch dropdown when using detected upstream - UI: skip base===head check for cross-repo PRs (same branch name on different repos is valid) - Types: add defaultBranch to GitHubRepoUpstreamResult * chore: delete superpowers folder * feat: add (local)/(remote) labels to PR branch display and adapt Repository button to selected remote * feat: Repository button adapts to selected remote (upstream vs origin) * fix: complete fork→upstream PR feature gaps Server: - Extend /api/github/repo/upstream to return defaultBranchSha and remoteName - Reuse headRepo result instead of redundant resolveGitHubRepoFromDirectory call - Return clear error when headRepo is null (invalid GitHub URL) UI: - Add upstream's default branch to availableBaseBranches when using detected upstream - Use upstream's default branch SHA in git log for generate description (fixes 'No commits found in range main...main') - Show qualified names (owner/repo · branch) in base branch dropdown when using detected upstream Types: - Add defaultBranchSha and remoteName to GitHubRepoUpstreamResult * fix: move detectedUpstream state before availableBaseBranches to fix temporal dead zone * fix: fetch upstream branches from GitHub API for base branch dropdown - Add GET /api/github/repo/branches endpoint to fetch branches via Octokit - Add repoBranches() to GitHub API client and interface - Fetch upstream branches on detection and store in upstreamBranches state - Include upstreamBranches in availableBaseBranches when using detected upstream - Re-add availableBaseBranches memo and auto-correction effect that were lost - Remove unnecessary qualified names from dropdown (upstream is already selected) * fix: restore prStatusKey and statusEntry declarations lost during refactor * fix: cleanly re-apply all fork→upstream PR UI changes Restored PullRequestSection.tsx from clean base and re-applied: - Expand detectedUpstream type with defaultBranch, defaultBranchSha, remoteName - Add upstreamBranches state and fetch on upstream detection - Include upstream branches in availableBaseBranches when using detected upstream - Use upstream default branch SHA in generate description (fixes 'No commits found') - Adapt Repository button URL to selected remote - Add (local)/(remote)/(upstream) labels to branch display * fix: move detectedUpstream/upstreamBranches before availableBaseBranches to fix TDZ * style: add pill badge styling to upstream repo source labels * fix: don't cache error PR status responses, allow force-bypass of server cache * fix: resolve PR status cache bugs, stale directory fallback, and upstream re-detection * fix: keep collapse button visible when scrolling long user messages - Collapse button now sticks to top of scrollable user message content instead of scrolling away * fix: checkbox focus ring blends into sidebar background * fix: polish fork PR follow-ups * fix: remove user message collapse artifact * fix: tighten fork PR internals * fix: check all remotes for fork PR status * fix: recover sidebar PR status misses --------- Signed-off-by: Islam Nofl <islamnofl.official@gmail.com> Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
This commit is contained in:
Islam Nofl
committed by
GitHub
GitHub
co-authored by
Bohdan Triapitsyn
Bohdan Triapitsyn
parent
17650becc0
commit
21253d7fc2
@@ -25,6 +25,7 @@ import {
|
||||
RiFileMusicLine,
|
||||
RiFilePdfLine,
|
||||
RiFileVideoLine,
|
||||
RiLoader4Line,
|
||||
RiPencilAiLine,
|
||||
RiQuestionLine,
|
||||
RiSearchLine,
|
||||
@@ -67,6 +68,7 @@ import { useModelLists } from '@/hooks/useModelLists';
|
||||
import { useIsTextTruncated } from '@/hooks/useIsTextTruncated';
|
||||
import { formatEffortLabel, getCycledPrimaryAgentName, type MobileControlsPanel } from './mobileControlsUtils';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { useOpenCodeReadiness } from '@/hooks/useOpenCodeReadiness';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
type IconComponent = ComponentType<any>;
|
||||
@@ -341,6 +343,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
|
||||
onMobilePanelChange,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const { isReady, isUnavailable } = useOpenCodeReadiness();
|
||||
const readinessLabel = isUnavailable ? t('common.unavailable') : t('common.loading');
|
||||
const providers = useConfigStore((state) => state.providers);
|
||||
const currentProviderId = useConfigStore((state) => state.currentProviderId);
|
||||
const currentModelId = useConfigStore((state) => state.currentModelId);
|
||||
@@ -2652,7 +2656,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
|
||||
return (
|
||||
<Tooltip delayDuration={1000}>
|
||||
{!isCompact ? (
|
||||
<DropdownMenu open={agentMenuOpen} onOpenChange={handleModelMenuOpenChange}>
|
||||
<DropdownMenu open={isReady && agentMenuOpen} onOpenChange={isReady ? handleModelMenuOpenChange : undefined}>
|
||||
<TooltipTrigger asChild>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div
|
||||
@@ -2661,7 +2665,18 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
|
||||
buttonHeight
|
||||
)}
|
||||
>
|
||||
{currentProviderId ? (
|
||||
{!isReady ? (
|
||||
<>
|
||||
<RiLoader4Line className={cn(controlIconSize, 'animate-spin text-muted-foreground flex-shrink-0')} />
|
||||
<span className={cn(
|
||||
'model-controls__model-label',
|
||||
controlTextSize,
|
||||
'font-medium whitespace-nowrap text-muted-foreground min-w-0'
|
||||
)}>
|
||||
{readinessLabel}
|
||||
</span>
|
||||
</>
|
||||
) : currentProviderId ? (
|
||||
<>
|
||||
<ProviderLogo
|
||||
providerId={currentProviderId}
|
||||
@@ -2672,6 +2687,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
|
||||
) : (
|
||||
<RiPencilAiLine className={cn(controlIconSize, 'text-muted-foreground')} />
|
||||
)}
|
||||
{isReady && (
|
||||
<span
|
||||
ref={modelLabelRef}
|
||||
key={`${currentProviderId}-${currentModelId}`}
|
||||
@@ -2686,6 +2702,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
|
||||
{currentModelDisplayName}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
@@ -2891,35 +2908,47 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveMobilePanel('model')}
|
||||
onTouchStart={() => handleLongPressStart('model')}
|
||||
onTouchEnd={handleLongPressEnd}
|
||||
onTouchCancel={handleLongPressEnd}
|
||||
onClick={isReady ? () => setActiveMobilePanel('model') : undefined}
|
||||
onTouchStart={isReady ? () => handleLongPressStart('model') : undefined}
|
||||
onTouchEnd={isReady ? handleLongPressEnd : undefined}
|
||||
onTouchCancel={isReady ? handleLongPressEnd : undefined}
|
||||
disabled={!isReady}
|
||||
className={cn(
|
||||
'model-controls__model-trigger flex items-center gap-1.5 min-w-0 focus:outline-none',
|
||||
'cursor-pointer hover:bg-transparent hover:opacity-70',
|
||||
isReady ? 'cursor-pointer hover:bg-transparent hover:opacity-70' : 'opacity-60 cursor-not-allowed',
|
||||
buttonHeight
|
||||
)}
|
||||
>
|
||||
{currentProviderId ? (
|
||||
<ProviderLogo
|
||||
providerId={currentProviderId}
|
||||
className={cn(controlIconSize, 'flex-shrink-0')}
|
||||
/>
|
||||
{!isReady ? (
|
||||
<>
|
||||
<RiLoader4Line className={cn(controlIconSize, 'animate-spin text-muted-foreground flex-shrink-0')} />
|
||||
<span className="typography-micro font-medium text-muted-foreground min-w-0">
|
||||
{readinessLabel}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<RiPencilAiLine className={cn(controlIconSize, 'text-muted-foreground')} />
|
||||
<>
|
||||
{currentProviderId ? (
|
||||
<ProviderLogo
|
||||
providerId={currentProviderId}
|
||||
className={cn(controlIconSize, 'flex-shrink-0')}
|
||||
/>
|
||||
) : (
|
||||
<RiPencilAiLine className={cn(controlIconSize, 'text-muted-foreground')} />
|
||||
)}
|
||||
<span
|
||||
ref={modelLabelRef}
|
||||
className={cn(
|
||||
'model-controls__model-label typography-micro font-medium overflow-hidden min-w-0',
|
||||
isMobile ? 'max-w-[120px]' : 'max-w-[220px]',
|
||||
)}
|
||||
>
|
||||
<span className={cn('marquee-text', isModelLabelTruncated && 'marquee-text--active')}>
|
||||
{currentModelDisplayName}
|
||||
</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
<span
|
||||
ref={modelLabelRef}
|
||||
className={cn(
|
||||
'model-controls__model-label typography-micro font-medium overflow-hidden min-w-0',
|
||||
isMobile ? 'max-w-[120px]' : 'max-w-[220px]',
|
||||
)}
|
||||
>
|
||||
<span className={cn('marquee-text', isModelLabelTruncated && 'marquee-text--active')}>
|
||||
{currentModelDisplayName}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
{renderModelTooltipContent()}
|
||||
@@ -3056,7 +3085,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
|
||||
};
|
||||
|
||||
const renderVariantSelector = () => {
|
||||
if (!hasVariants) {
|
||||
if (!isReady || !hasVariants) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -3154,32 +3183,54 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
|
||||
return (
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<Tooltip delayDuration={1000}>
|
||||
<DropdownMenu open={isAgentSelectorOpen} onOpenChange={setIsAgentSelectorOpen}>
|
||||
<DropdownMenu open={isReady && isAgentSelectorOpen} onOpenChange={isReady ? setIsAgentSelectorOpen : undefined}>
|
||||
<TooltipTrigger asChild>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className={cn(
|
||||
'flex items-center gap-1.5 transition-colors cursor-pointer hover:bg-transparent hover:opacity-70 min-w-0',
|
||||
buttonHeight
|
||||
)}>
|
||||
<RiAiAgentLine
|
||||
className={cn(
|
||||
controlIconSize,
|
||||
'flex-shrink-0',
|
||||
uiAgentName ? '' : 'text-muted-foreground'
|
||||
)}
|
||||
style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'model-controls__agent-label',
|
||||
controlTextSize,
|
||||
'font-medium min-w-0 truncate',
|
||||
isDesktop ? 'max-w-[220px]' : undefined
|
||||
)}
|
||||
style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
|
||||
>
|
||||
{getAgentDisplayName()}
|
||||
</span>
|
||||
{!isReady ? (
|
||||
<>
|
||||
<RiLoader4Line
|
||||
className={cn(
|
||||
controlIconSize,
|
||||
'flex-shrink-0 animate-spin text-muted-foreground'
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'model-controls__agent-label',
|
||||
controlTextSize,
|
||||
'font-medium min-w-0 truncate text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{readinessLabel}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RiAiAgentLine
|
||||
className={cn(
|
||||
controlIconSize,
|
||||
'flex-shrink-0',
|
||||
uiAgentName ? '' : 'text-muted-foreground'
|
||||
)}
|
||||
style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'model-controls__agent-label',
|
||||
controlTextSize,
|
||||
'font-medium min-w-0 truncate',
|
||||
isDesktop ? 'max-w-[220px]' : undefined
|
||||
)}
|
||||
style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
|
||||
>
|
||||
{getAgentDisplayName()}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
@@ -3257,35 +3308,58 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveMobilePanel('agent')}
|
||||
onTouchStart={() => handleLongPressStart('agent')}
|
||||
onTouchEnd={handleLongPressEnd}
|
||||
onTouchCancel={handleLongPressEnd}
|
||||
onClick={isReady ? () => setActiveMobilePanel('agent') : undefined}
|
||||
onTouchStart={isReady ? () => handleLongPressStart('agent') : undefined}
|
||||
onTouchEnd={isReady ? handleLongPressEnd : undefined}
|
||||
onTouchCancel={isReady ? handleLongPressEnd : undefined}
|
||||
disabled={!isReady}
|
||||
className={cn(
|
||||
'model-controls__agent-trigger flex items-center gap-1.5 transition-colors min-w-0 focus:outline-none',
|
||||
buttonHeight,
|
||||
'cursor-pointer hover:bg-transparent hover:opacity-70',
|
||||
isReady ? 'cursor-pointer hover:bg-transparent hover:opacity-70' : 'opacity-60 cursor-not-allowed',
|
||||
)}
|
||||
>
|
||||
<RiAiAgentLine
|
||||
className={cn(
|
||||
controlIconSize,
|
||||
'flex-shrink-0',
|
||||
uiAgentName ? '' : 'text-muted-foreground'
|
||||
)}
|
||||
style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'model-controls__agent-label',
|
||||
controlTextSize,
|
||||
'font-medium truncate min-w-0',
|
||||
isMobile && 'max-w-[60px]'
|
||||
)}
|
||||
style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
|
||||
>
|
||||
{getAgentDisplayName()}
|
||||
</span>
|
||||
{!isReady ? (
|
||||
<>
|
||||
<RiLoader4Line
|
||||
className={cn(
|
||||
controlIconSize,
|
||||
'flex-shrink-0 animate-spin text-muted-foreground'
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'model-controls__agent-label',
|
||||
controlTextSize,
|
||||
'font-medium truncate min-w-0 text-muted-foreground'
|
||||
)}
|
||||
>
|
||||
{readinessLabel}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RiAiAgentLine
|
||||
className={cn(
|
||||
controlIconSize,
|
||||
'flex-shrink-0',
|
||||
uiAgentName ? '' : 'text-muted-foreground'
|
||||
)}
|
||||
style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
'model-controls__agent-label',
|
||||
controlTextSize,
|
||||
'font-medium truncate min-w-0',
|
||||
isMobile && 'max-w-[60px]'
|
||||
)}
|
||||
style={uiAgentName ? { color: `var(${getAgentColor(uiAgentName).var})` } : undefined}
|
||||
>
|
||||
{getAgentDisplayName()}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user