feat: display stream targetRepository data in disabled selectors (#131)

* Apply patch

* Apply patch

* Apply patch

* format

* fix import type

apps/web/src/components/github/repo-branch-selectors/branch-selector.tsx

@@ -17,12 +17,14 @@ import { cn } from "@/lib/utils";
 import { useState, useEffect } from "react";
 import { useGitHubAppProvider } from "@/providers/GitHubApp";
 import { GitBranch, Shield } from "lucide-react";
+import { TargetRepository } from "@open-swe/shared/open-swe/types";
 
 interface BranchSelectorProps {
   disabled?: boolean;
   placeholder?: string;
   buttonClassName?: string;
   chatStarted?: boolean;
+  streamTargetRepository?: TargetRepository;
 }
 
 export function BranchSelector({
@@ -30,6 +32,7 @@ export function BranchSelector({
   placeholder = "Select a branch...",
   buttonClassName,
   chatStarted = false,
+  streamTargetRepository,
 }: BranchSelectorProps) {
   const [open, setOpen] = useState(false);
   const {
@@ -147,6 +150,12 @@ export function BranchSelector({
     );
   }
 
+  // Determine the display value - prioritize stream data when chatStarted and available
+  const displayValue =
+    chatStarted && streamTargetRepository?.branch
+      ? streamTargetRepository.branch
+      : selectedBranch;
+
   if (chatStarted) {
     return (
       <Button
@@ -157,7 +166,7 @@ export function BranchSelector({
         <div className="flex min-w-0 flex-1 items-center gap-2">
           <GitBranch />
           <span className="truncate text-left">
-            {selectedBranch || placeholder}
+            {displayValue || placeholder}
           </span>
         </div>
       </Button>

apps/web/src/components/github/repo-branch-selectors/index.tsx

@@ -1,6 +1,7 @@
 import { BranchSelector } from "./branch-selector";
 import { RepositorySelector } from "./repository-selector";
 import { useQueryState } from "nuqs";
+import { useStreamContext } from "@/providers/Stream";
 
 export function RepositoryBranchSelectors() {
   const [threadId] = useQueryState("threadId");
@@ -10,6 +11,12 @@ export function RepositoryBranchSelectors() {
   const defaultStylesChatStarted =
     "hover:bg-inherit cursor-default hover:cursor-default hover:text-gray-500 hover:border-gray-300 hover:ring-inherit";
 
+  // Access stream context when chat has started
+  const stream = useStreamContext();
+  const streamTargetRepository = chatStarted
+    ? stream?.values?.targetRepository
+    : undefined;
+
   return (
     <div className="flex items-center gap-2">
       <RepositorySelector
@@ -18,6 +25,7 @@ export function RepositoryBranchSelectors() {
           defaultButtonStyles +
           (chatStarted ? " " + defaultStylesChatStarted : "")
         }
+        streamTargetRepository={streamTargetRepository}
       />
       <BranchSelector
         chatStarted={chatStarted}
@@ -25,6 +33,7 @@ export function RepositoryBranchSelectors() {
           defaultButtonStyles +
           (chatStarted ? " " + defaultStylesChatStarted : "")
         }
+        streamTargetRepository={streamTargetRepository}
       />
     </div>
   );

apps/web/src/components/github/repo-branch-selectors/repository-selector.tsx

@@ -25,6 +25,7 @@ interface RepositorySelectorProps {
   placeholder?: string;
   buttonClassName?: string;
   chatStarted?: boolean;
+  streamTargetRepository?: TargetRepository;
 }
 // TODO: remove this, we should use the TargetRepository type from the open-swe package
 // Convert GitHub Repository to TargetRepository format
@@ -41,6 +42,7 @@ export function RepositorySelector({
   placeholder = "Select a repository...",
   buttonClassName,
   chatStarted = false,
+  streamTargetRepository,
 }: RepositorySelectorProps) {
   const [open, setOpen] = useState(false);
   const {
@@ -69,6 +71,12 @@ export function RepositorySelector({
     ? `${selectedRepository.owner}/${selectedRepository.repo}`
     : undefined;
 
+  // When chatStarted and streamTargetRepository is available, use it for display
+  const displayValue =
+    chatStarted && streamTargetRepository
+      ? `${streamTargetRepository.owner}/${streamTargetRepository.repo}`
+      : selectedValue;
+
   if (isLoading) {
     return (
       <Button
@@ -155,7 +163,7 @@ export function RepositorySelector({
         <div className="flex min-w-0 flex-1 items-center gap-2">
           <GitHubSVG />
           <span className="truncate text-left">
-            {selectedValue || placeholder}
+            {displayValue || placeholder}
           </span>
         </div>
       </Button>