feat: Show github profile picture for user in chat (#651)

apps/web/src/components/plan/proposed-plan.tsx

@@ -2,7 +2,7 @@ import { PlanViewer } from "./plan-viewer";
 import { useProposedPlan } from "../thread/agent-inbox/hooks/useProposedPlan";
 import { PlanItem } from "@open-swe/shared/open-swe/types";
 import { useStream } from "@langchain/langgraph-sdk/react";
-import { X, ArrowDown } from "lucide-react";
+import { X, ArrowRight } from "lucide-react";
 
 export function ProposedPlan({
   originalPlanItems,
@@ -47,7 +47,7 @@ export function ProposedPlan({
             className="group flex cursor-pointer flex-col items-center gap-2 transition-all"
           >
             <div className="rounded-full border-2 border-dashed border-green-500 p-3 transition-all group-hover:border-solid group-hover:bg-green-50 dark:group-hover:bg-green-950/50">
-              <ArrowDown className="h-5 w-5 text-green-500" />
+              <ArrowRight className="h-5 w-5 text-green-500" />
             </div>
             <span className="text-muted-foreground text-xs group-hover:text-green-600 dark:group-hover:text-green-400">
               {changesMade ? "Submit changes" : "Continue"}

apps/web/src/components/v2/manager-chat.tsx

@@ -8,7 +8,6 @@ import { AnimatePresence, motion } from "framer-motion";
 import { Bot, Copy, CopyCheck, ArrowUp, User, AlertCircle } from "lucide-react";
 import { Textarea } from "../ui/textarea";
 import { Button } from "../ui/button";
-import { cn } from "@/lib/utils";
 import { isAIMessageSDK } from "@/lib/langchain-messages";
 import { BasicMarkdownText } from "../thread/markdown-text";
 import { ErrorState } from "./types";
@@ -70,6 +69,13 @@ interface ManagerChatProps {
   isLoading: boolean;
   cancelRun: () => void;
   errorState?: ErrorState | null;
+  githubUser?: {
+    login: string;
+    avatar_url: string;
+    html_url: string;
+    name: string | null;
+    email: string | null;
+  };
 }
 
 function extractResponseFromMessage(message: Message): string {
@@ -93,6 +99,7 @@ export function ManagerChat({
   isLoading,
   cancelRun,
   errorState,
+  githubUser,
 }: ManagerChatProps) {
   return (
     <div className="border-border bg-muted/30 flex h-full w-1/3 flex-col border-r">
@@ -112,23 +119,35 @@ export function ManagerChat({
                   return (
                     <div
                       key={message.id}
-                      className="group bg-muted flex gap-3 rounded-lg p-3"
+                      className="group bg-muted flex items-start gap-3 rounded-lg p-3"
                     >
-                      <div className="flex-shrink-0">
+                      <div className="mt-0.5 flex-shrink-0">
                         {message.type === "human" ? (
-                          <div className="bg-muted flex h-6 w-6 items-center justify-center rounded-full">
-                            <User className="text-muted-foreground h-3 w-3" />
-                          </div>
+                          githubUser?.avatar_url ? (
+                            <div className="bg-muted flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
+                              <img
+                                src={githubUser.avatar_url}
+                                alt={githubUser.login}
+                                className="h-full w-full object-cover"
+                              />
+                            </div>
+                          ) : (
+                            <div className="bg-muted flex h-6 w-6 items-center justify-center rounded-full">
+                              <User className="text-muted-foreground h-4 w-4" />
+                            </div>
+                          )
                         ) : (
                           <div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-950/50">
-                            <Bot className="h-3 w-3 text-blue-700 dark:text-blue-300" />
+                            <Bot className="size-4.5 text-blue-700 dark:text-blue-300" />
                           </div>
                         )}
                       </div>
                       <div className="relative min-w-0 flex-1 space-y-1 overflow-x-hidden">
                         <div className="flex items-center justify-between gap-2">
                           <span className="text-muted-foreground text-xs font-medium">
-                            {message.type === "human" ? "You" : "Agent"}
+                            {message.type === "human"
+                              ? githubUser?.login || "You"
+                              : "Open SWE"}
                           </span>
                           <div className="opacity-0 transition-opacity group-hover:opacity-100">
                             <MessageCopyButton content={messageContentString} />

apps/web/src/components/v2/thread-view.tsx

@@ -43,6 +43,7 @@ import {
 } from "@open-swe/shared/open-swe/custom-node-events";
 import { StickToBottom } from "use-stick-to-bottom";
 import { TokenUsage } from "./token-usage";
+import { useUser } from "@/hooks/useUser";
 
 interface ThreadViewProps {
   stream: ReturnType<typeof useStream<ManagerGraphState>>;
@@ -88,6 +89,7 @@ export function ThreadView({
   displayThread,
   onBackToHome,
 }: ThreadViewProps) {
+  const { user } = useUser();
   const [chatInput, setChatInput] = useState("");
   const [selectedTab, setSelectedTab] = useState<"planner" | "programmer">(
     "planner",
@@ -325,6 +327,7 @@ export function ThreadView({
           isLoading={stream.isLoading}
           cancelRun={cancelRun}
           errorState={errorState}
+          githubUser={user || undefined}
         />
         {/* Right Side - Actions & Plan */}
         <div