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>
2026-04-29 12:03:39 +03:00
parent 17650becc0
commit 21253d7fc2
27 changed files with 1042 additions and 296 deletions
@@ -11,7 +11,7 @@ import { Input } from '@/components/ui/input';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { useDeviceInfo } from '@/lib/device';
-import { RiArrowDownSLine, RiArrowRightSLine, RiCheckLine, RiCloseLine, RiPencilAiLine, RiSearchLine, RiStarFill, RiStarLine, RiTimeLine } from '@remixicon/react';
+import { RiArrowDownSLine, RiArrowRightSLine, RiCheckLine, RiCloseLine, RiLoader4Line, RiPencilAiLine, RiSearchLine, RiStarFill, RiStarLine, RiTimeLine } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
 import { ProviderLogo } from '@/components/ui/ProviderLogo';
@@ -19,6 +19,7 @@ import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { useModelLists } from '@/hooks/useModelLists';
 import type { ModelMetadata } from '@/types';
 import { useI18n } from '@/lib/i18n';
+import { useOpenCodeReadiness } from '@/hooks/useOpenCodeReadiness';

 type ProviderModel = Record<string, unknown> & { id?: string; name?: string };

@@ -58,6 +59,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
    placeholder
 }) => {
    const { t } = useI18n();
+    const { isReady, isUnavailable } = useOpenCodeReadiness();
    const providers = useConfigStore((state) => state.providers);
    const modelsMetadata = useConfigStore((state) => state.modelsMetadata);
    const isMobile = useUIStore(state => state.isMobile);
@@ -495,14 +497,21 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
            {isActuallyMobile ? (
                <button
                    type="button"
-                    onClick={() => setIsMobilePanelOpen(true)}
+                    onClick={isReady ? () => setIsMobilePanelOpen(true) : undefined}
+                    disabled={!isReady}
                    className={cn(
                        'flex w-full items-center justify-between gap-2 rounded-lg border border-border/40 bg-[var(--surface-elevated)] px-2 py-1.5 text-left',
+                        !isReady && 'opacity-60 cursor-not-allowed',
                        className
                    )}
                >
                    <div className="flex items-center gap-2">
-                        {providerId ? (
+                        {!isReady ? (
+                            <>
+                                <RiLoader4Line className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+                                <span className="typography-meta text-muted-foreground">{isUnavailable ? t('common.unavailable') : t('common.loading')}</span>
+                            </>
+                        ) : providerId ? (
                            <ProviderLogo
                                providerId={providerId}
                                className="h-3.5 w-3.5"
@@ -510,33 +519,46 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                        ) : (
                            <RiPencilAiLine className="h-3 w-3 text-muted-foreground" />
                        )}
-                        <span className="typography-meta font-medium text-foreground">
-                            {providerId && modelId ? `${providerId}/${modelId}` : (placeholder || t('settings.agents.modelSelector.selectPlaceholder'))}
-                        </span>
+                        {isReady && (
+                            <span className="typography-meta font-medium text-foreground">
+                                {providerId && modelId ? `${providerId}/${modelId}` : (placeholder || t('settings.agents.modelSelector.selectPlaceholder'))}
+                            </span>
+                        )}
                    </div>
                    <RiArrowDownSLine className="h-3 w-3 text-muted-foreground" />
                </button>
            ) : (
-                <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+                <DropdownMenu open={isReady && isDropdownOpen} onOpenChange={isReady ? setIsDropdownOpen : undefined}>
                    <DropdownMenuTrigger asChild>
                        <div className={cn(
                            'border-input data-[placeholder]:text-muted-foreground flex items-center justify-between gap-2 rounded-lg border bg-transparent px-2 py-2 typography-ui-label whitespace-nowrap shadow-none outline-none hover:bg-interactive-hover data-[popup-open]:bg-interactive-active h-6 w-fit',
                            className
                        )}>
-                            {providerId ? (
+                            {!isReady ? (
                                <>
-                                    <ProviderLogo
-                                        providerId={providerId}
-                                        className="h-3.5 w-3.5 flex-shrink-0"
-                                    />
-                                    <RiPencilAiLine className="h-3 w-3 text-primary/60 hidden" />
+                                    <RiLoader4Line className="h-3.5 w-3.5 animate-spin text-muted-foreground flex-shrink-0" />
+                                    <span className="typography-ui-label font-normal whitespace-nowrap text-muted-foreground">
+                                        {isUnavailable ? t('common.unavailable') : t('common.loading')}
+                                    </span>
                                </>
                            ) : (
-                                <RiPencilAiLine className="h-3.5 w-3.5 text-muted-foreground" />
+                                <>
+                                    {providerId ? (
+                                        <>
+                                            <ProviderLogo
+                                                providerId={providerId}
+                                                className="h-3.5 w-3.5 flex-shrink-0"
+                                            />
+                                            <RiPencilAiLine className="h-3 w-3 text-primary/60 hidden" />
+                                        </>
+                                    ) : (
+                                        <RiPencilAiLine className="h-3.5 w-3.5 text-muted-foreground" />
+                                    )}
+                                    <span className="typography-ui-label font-normal whitespace-nowrap text-foreground">
+                                        {providerId && modelId ? `${providerId}/${modelId}` : (placeholder || t('settings.agents.modelSelector.notSelected'))}
+                                    </span>
+                                </>
                            )}
-                            <span className="typography-ui-label font-normal whitespace-nowrap text-foreground">
-                                {providerId && modelId ? `${providerId}/${modelId}` : (placeholder || t('settings.agents.modelSelector.notSelected'))}
-                            </span>
                            <RiArrowDownSLine className="h-4 w-4 flex-shrink-0 text-muted-foreground/50" />
                        </div>
                    </DropdownMenuTrigger>
@@ -10,10 +10,11 @@ import { useAgentsStore, filterVisibleAgents } from '@/stores/useAgentsStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { useDeviceInfo } from '@/lib/device';
-import { RiArrowDownSLine, RiRobot2Line } from '@remixicon/react';
+import { RiArrowDownSLine, RiLoader4Line, RiRobot2Line } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
 import { useI18n } from '@/lib/i18n';
+import { useOpenCodeReadiness } from '@/hooks/useOpenCodeReadiness';

 interface AgentSelectorProps {
    agentName: string;
@@ -29,6 +30,7 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
    filter,
 }) => {
    const { t } = useI18n();
+    const { isReady, isUnavailable } = useOpenCodeReadiness();
    const configAgents = useConfigStore((state) => state.agents);
    const agentsStoreAgents = useAgentsStore((state) => state.agents);
    const loadAgentsStore = useAgentsStore((state) => state.loadAgents);
@@ -125,20 +127,41 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
            {isActuallyMobile ? (
                <button
                    type="button"
-                    onClick={() => setIsMobilePanelOpen(true)}
+                    onClick={isReady ? () => setIsMobilePanelOpen(true) : undefined}
+                    disabled={!isReady}
                    className={cn(
                        'flex w-full items-center justify-between gap-2 rounded-lg border border-border/40 bg-background/95 px-2 py-1.5 text-left',
+                        !isReady && 'opacity-60 cursor-not-allowed',
                        className
                    )}
                >
                    <div className="flex items-center gap-2">
-                        <RiRobot2Line className="h-3.5 w-3.5 text-muted-foreground" />
-                        <span className="typography-meta font-medium text-foreground">
-                            {agentName || t('settings.commands.agentSelector.selectAgentPlaceholder')}
-                        </span>
+                        {!isReady ? (
+                            <>
+                                <RiLoader4Line className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+                                <span className="typography-meta text-muted-foreground">{isUnavailable ? t('common.unavailable') : t('common.loading')}</span>
+                            </>
+                        ) : (
+                            <>
+                                <RiRobot2Line className="h-3.5 w-3.5 text-muted-foreground" />
+                                <span className="typography-meta font-medium text-foreground">
+                                    {agentName || t('settings.commands.agentSelector.selectAgentPlaceholder')}
+                                </span>
+                            </>
+                        )}
                    </div>
                    <RiArrowDownSLine className="h-3 w-3 text-muted-foreground" />
                </button>
+            ) : !isReady ? (
+                <div className={cn(
+                    'flex items-center gap-2 px-2 rounded-lg bg-interactive-selection/20 border border-border/20 h-6 w-fit opacity-60',
+                    className
+                )}>
+                    <RiLoader4Line className="h-3 w-3 animate-spin text-muted-foreground flex-shrink-0" />
+                    <span className="typography-micro font-medium whitespace-nowrap text-muted-foreground">
+                        {isUnavailable ? t('common.unavailable') : t('common.loading')}
+                    </span>
+                </div>
            ) : (
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>