From 70611c0d3ffb0cb9ff6709c851e38803650a7956 Mon Sep 17 00:00:00 2001
From: willsather <56037657+willsather@users.noreply.github.com>
Date: Sat, 11 Apr 2026 21:22:48 +0000
Subject: [PATCH 1/3] feat: integrate inline question UI into prompt box for
 mobile

---
 .../chats/[chatId]/session-chat-content.tsx   |  68 ++-
 apps/web/components/question-panel.tsx        | 464 ------------------
 bun.lock                                      |   1 +
 3 files changed, 57 insertions(+), 476 deletions(-)
 delete mode 100644 apps/web/components/question-panel.tsx

diff --git a/apps/web/app/sessions/[sessionId]/chats/[chatId]/session-chat-content.tsx b/apps/web/app/sessions/[sessionId]/chats/[chatId]/session-chat-content.tsx
index 576a799d7..334af7b08 100644
--- a/apps/web/app/sessions/[sessionId]/chats/[chatId]/session-chat-content.tsx
+++ b/apps/web/app/sessions/[sessionId]/chats/[chatId]/session-chat-content.tsx
@@ -63,7 +63,7 @@ import { FileSuggestionsDropdown } from "@/components/file-suggestions-dropdown"
 import { ImageAttachmentsPreview } from "@/components/image-attachments-preview";
 import { TextAttachmentsPreview } from "@/components/text-attachments-preview";
 import { ModelSelectorCompact } from "@/components/model-selector-compact";
-import { QuestionPanel } from "@/components/question-panel";
+import { useInlineQuestion } from "@/components/inline-question-input";
 import { SlashCommandDropdown } from "@/components/slash-command-dropdown";
 import { SnippetChip } from "@/components/snippet-chip";
 import { AssistantMessageGroups } from "@/components/assistant-message-groups";
@@ -2638,6 +2638,26 @@ export function SessionChatContent({
     }
   }, [questionToolCallId, addToolOutput]);
 
+  // Stable empty array so the hook doesn't reset on every render when there's no question
+  const emptyQuestions = useMemo(
+    () => [] as AskUserQuestionInput["questions"],
+    [],
+  );
+
+  const inlineQuestion = useInlineQuestion({
+    questions:
+      hasPendingQuestion && pendingQuestionPart
+        ? pendingQuestionPart.input.questions
+        : emptyQuestions,
+    onSubmit: handleQuestionSubmit,
+    onCancel: handleQuestionCancel,
+    textareaValue: input,
+    onTextareaChange: setInput,
+  });
+
+  // Inline question UI is integrated into the prompt box on all viewports
+  const showInlineQuestion = inlineQuestion.isActive;
+
   const isReconnectingSandbox =
     reconnectionStatus === "checking" &&
     !sandboxInfo &&
@@ -3656,15 +3676,6 @@ export function SessionChatContent({
                 )}
               </div>
 
-              {/* Question Panel */}
-              {hasPendingQuestion && pendingQuestionPart && (
-                <QuestionPanel
-                  questions={pendingQuestionPart.input.questions}
-                  onSubmit={handleQuestionSubmit}
-                  onCancel={handleQuestionCancel}
-                />
-              )}
-
               {/* Input */}
               <div className="p-4 pb-2 sm:pb-8">
                 <div className="mx-auto max-w-4xl space-y-2">
@@ -3755,6 +3766,8 @@ export function SessionChatContent({
                       <form
                         onSubmit={async (e) => {
                           e.preventDefault();
+                          // When inline question is active, don't send a chat message
+                          if (showInlineQuestion) return;
                           if (
                             isArchived ||
                             !isSandboxActive ||
@@ -3960,12 +3973,19 @@ export function SessionChatContent({
                           </div>
                         )}
 
+                        {/* Inline question UI for mobile — rendered inside prompt box */}
+                        {showInlineQuestion && inlineQuestion.questionHeaderUI}
+
                         {/* Textarea area */}
                         <div className="px-4 pb-2 pt-3">
                           <textarea
                             ref={inputRef}
                             value={input}
-                            placeholder="Request changes or ask a question..."
+                            placeholder={
+                              showInlineQuestion
+                                ? inlineQuestion.placeholder
+                                : "Request changes or ask a question..."
+                            }
                             rows={1}
                             onFocus={handleTextareaFocus}
                             onChange={(e) => {
@@ -3975,6 +3995,16 @@ export function SessionChatContent({
                               );
                             }}
                             onKeyDown={(e) => {
+                              // When inline question is active, Enter advances the question
+                              if (
+                                showInlineQuestion &&
+                                e.key === "Enter" &&
+                                !e.shiftKey
+                              ) {
+                                e.preventDefault();
+                                inlineQuestion.handleNext();
+                                return;
+                              }
                               // Let suggestions handle keyboard events first
                               if (handleSuggestionsKeyDown(e)) {
                                 return;
@@ -4144,7 +4174,21 @@ export function SessionChatContent({
                               )}
                             </Button>
 
-                            {isChatInFlight || hasPendingResponse ? (
+                            {showInlineQuestion ? (
+                              <Button
+                                type="button"
+                                size="sm"
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  inlineQuestion.handleNext();
+                                }}
+                                disabled={!inlineQuestion.hasCurrentAnswer}
+                                className="h-8 rounded-full bg-primary px-3 text-xs text-primary-foreground hover:bg-primary/90 disabled:opacity-30"
+                              >
+                                <Check className="mr-1 h-3 w-3" />
+                                {inlineQuestion.buttonLabel}
+                              </Button>
+                            ) : isChatInFlight || hasPendingResponse ? (
                               <Button
                                 type="button"
                                 size="icon"
diff --git a/apps/web/components/question-panel.tsx b/apps/web/components/question-panel.tsx
deleted file mode 100644
index d3ec6a934..000000000
--- a/apps/web/components/question-panel.tsx
+++ /dev/null
@@ -1,464 +0,0 @@
-"use client";
-
-import { useState, useCallback, useMemo, useEffect, useRef } from "react";
-import { Check, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
-import type { AskUserQuestionInput } from "@open-harness/agent";
-
-type Question = AskUserQuestionInput["questions"][number];
-
-type QuestionPanelProps = {
-  questions: Question[];
-  onSubmit: (answers: Record<string, string | string[]>) => void;
-  onCancel: () => void;
-};
-
-type TabState = {
-  currentTab: number;
-  answers: Record<string, string | string[]>;
-  otherText: Record<string, string>;
-  typingOther: Record<string, boolean>;
-};
-
-export function QuestionPanel({
-  questions,
-  onSubmit,
-  onCancel,
-}: QuestionPanelProps) {
-  const totalTabs = questions.length + 1; // Questions + Submit tab
-
-  const [state, setState] = useState<TabState>(() => ({
-    currentTab: 0,
-    answers: {},
-    otherText: {},
-    typingOther: {},
-  }));
-
-  // Ref to track current tab for setTimeout callbacks (avoids stale closure)
-  const currentTabRef = useRef(state.currentTab);
-  useEffect(() => {
-    currentTabRef.current = state.currentTab;
-  }, [state.currentTab]);
-
-  const currentQuestion = questions[state.currentTab] as Question | undefined;
-  const isSubmitTab = state.currentTab === questions.length;
-
-  // Computed values for "Other" option
-  const otherText = currentQuestion
-    ? state.otherText[currentQuestion.question] || ""
-    : "";
-  const currentAnswer = currentQuestion
-    ? state.answers[currentQuestion.question]
-    : undefined;
-  const isOtherSelected = currentQuestion
-    ? currentQuestion.multiSelect
-      ? Array.isArray(currentAnswer) &&
-        otherText !== "" &&
-        currentAnswer.includes(otherText)
-      : currentAnswer === otherText && otherText !== ""
-    : false;
-
-  // Get current answer for a question
-  const getAnswer = useCallback(
-    (question: string): string | string[] | undefined => {
-      return state.answers[question];
-    },
-    [state.answers],
-  );
-
-  // Check if all questions have answers
-  const allAnswered = useMemo(() => {
-    return questions.every((q) => {
-      const answer = getAnswer(q.question);
-      return (
-        answer !== undefined &&
-        (Array.isArray(answer) ? answer.length > 0 : answer !== "")
-      );
-    });
-  }, [questions, getAnswer]);
-
-  // Handle tab navigation
-  const goToTab = useCallback(
-    (index: number) => {
-      setState((prev) => ({
-        ...prev,
-        currentTab: Math.max(0, Math.min(index, totalTabs - 1)),
-      }));
-    },
-    [totalTabs],
-  );
-
-  // Handle option selection
-  const selectOption = useCallback(
-    (question: Question, optionLabel: string, autoAdvance = true) => {
-      setState((prev) => {
-        const currentAnswer = prev.answers[question.question];
-
-        if (question.multiSelect) {
-          // Multi-select: toggle the option
-          const currentArray = Array.isArray(currentAnswer)
-            ? currentAnswer
-            : currentAnswer
-              ? [currentAnswer]
-              : [];
-          const exists = currentArray.includes(optionLabel);
-          const newArray = exists
-            ? currentArray.filter((a) => a !== optionLabel)
-            : [...currentArray, optionLabel];
-          return {
-            ...prev,
-            answers: { ...prev.answers, [question.question]: newArray },
-            typingOther: { ...prev.typingOther, [question.question]: false },
-          };
-        } else {
-          // Single select: replace
-          return {
-            ...prev,
-            answers: { ...prev.answers, [question.question]: optionLabel },
-            typingOther: { ...prev.typingOther, [question.question]: false },
-          };
-        }
-      });
-
-      // Auto-advance for single-select only (use ref to avoid stale closure)
-      if (autoAdvance && !question.multiSelect) {
-        setTimeout(() => goToTab(currentTabRef.current + 1), 150);
-      }
-    },
-    [goToTab],
-  );
-
-  // Handle "Other" text change
-  const handleOtherInput = useCallback(
-    (question: string, input: string) => {
-      setState((prev) => {
-        const newOtherText = { ...prev.otherText, [question]: input };
-        const newAnswers = { ...prev.answers };
-        const currentAnswer = prev.answers[question];
-        const previousOther = prev.otherText[question] || "";
-
-        const questionObj = questions.find((q) => q.question === question);
-
-        if (questionObj?.multiSelect) {
-          const currentArray = Array.isArray(currentAnswer)
-            ? currentAnswer
-            : currentAnswer
-              ? [currentAnswer]
-              : [];
-          let updatedArray = currentArray.filter((a) => a !== previousOther);
-          if (input) {
-            updatedArray = [...updatedArray, input];
-          }
-          if (updatedArray.length > 0) {
-            newAnswers[question] = updatedArray;
-          } else {
-            delete newAnswers[question];
-          }
-        } else {
-          if (input) {
-            newAnswers[question] = input;
-          } else {
-            delete newAnswers[question];
-          }
-        }
-
-        return {
-          ...prev,
-          otherText: newOtherText,
-          answers: newAnswers,
-          typingOther: { ...prev.typingOther, [question]: true },
-        };
-      });
-    },
-    [questions],
-  );
-
-  // Confirm "Other" text and advance
-  const confirmOther = useCallback(
-    (question: Question) => {
-      const otherValue = state.otherText[question.question] || "";
-      if (otherValue) {
-        setState((prev) => ({
-          ...prev,
-          typingOther: { ...prev.typingOther, [question.question]: false },
-        }));
-        if (!question.multiSelect) {
-          goToTab(state.currentTab + 1);
-        }
-      }
-    },
-    [goToTab, state.currentTab, state.otherText],
-  );
-
-  // Keyboard navigation
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Don't handle if we're typing in the Other field
-      const isTypingOther =
-        currentQuestion && state.typingOther[currentQuestion.question];
-      if (isTypingOther) return;
-
-      // Escape to cancel
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onCancel();
-        return;
-      }
-
-      // Left/Right arrow for tab navigation
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        goToTab(state.currentTab - 1);
-        return;
-      }
-      if (e.key === "ArrowRight") {
-        e.preventDefault();
-        goToTab(state.currentTab + 1);
-        return;
-      }
-
-      // Number keys for quick selection (1-4)
-      if (currentQuestion && !isSubmitTab) {
-        const num = parseInt(e.key, 10);
-        if (num >= 1 && num <= currentQuestion.options.length) {
-          const option = currentQuestion.options[num - 1];
-          if (option) {
-            e.preventDefault();
-            selectOption(currentQuestion, option.label);
-          }
-        }
-      }
-
-      // Enter to submit on submit tab
-      if (isSubmitTab && e.key === "Enter" && allAnswered) {
-        e.preventDefault();
-        onSubmit(state.answers);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [
-    currentQuestion,
-    isSubmitTab,
-    allAnswered,
-    state.currentTab,
-    state.typingOther,
-    state.answers,
-    goToTab,
-    onCancel,
-    onSubmit,
-    selectOption,
-  ]);
-
-  return (
-    <div className="px-4 py-4">
-      <div className="mx-auto max-w-4xl rounded-lg border border-border bg-card p-4">
-        {/* Tab bar */}
-        <div className="mb-4 flex items-center gap-1 overflow-x-auto">
-          {questions.map((q, idx) => {
-            const isActive = idx === state.currentTab;
-            const hasAnswer = getAnswer(q.question) !== undefined;
-            return (
-              <button
-                key={q.question}
-                type="button"
-                onClick={() => goToTab(idx)}
-                className={cn(
-                  "flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm transition-colors",
-                  isActive
-                    ? "bg-primary text-primary-foreground"
-                    : hasAnswer
-                      ? "bg-green-500/10 text-green-500 hover:bg-green-500/20"
-                      : "bg-muted text-muted-foreground hover:bg-accent",
-                )}
-              >
-                {hasAnswer ? <Check className="h-3 w-3" /> : null}
-                {q.header}
-              </button>
-            );
-          })}
-          <button
-            type="button"
-            onClick={() => goToTab(questions.length)}
-            className={cn(
-              "flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm transition-colors",
-              isSubmitTab
-                ? "bg-primary text-primary-foreground"
-                : allAnswered
-                  ? "bg-green-500/10 text-green-500 hover:bg-green-500/20"
-                  : "bg-muted text-muted-foreground hover:bg-accent",
-            )}
-          >
-            {allAnswered ? <Check className="h-3 w-3" /> : null}
-            Submit
-          </button>
-        </div>
-
-        {/* Content area */}
-        <div className="min-h-[200px]">
-          {isSubmitTab ? (
-            // Submit tab: review answers
-            <div>
-              <h3 className="mb-3 font-medium text-foreground">
-                Review your answers
-              </h3>
-              <div className="space-y-3">
-                {questions.map((q) => {
-                  const answer = getAnswer(q.question);
-                  const answerStr = Array.isArray(answer)
-                    ? answer.join(", ")
-                    : answer || "(not answered)";
-                  return (
-                    <div key={q.question} className="space-y-1">
-                      <p className="text-sm text-foreground">{q.question}</p>
-                      <p className="text-sm text-muted-foreground">
-                        <span className="text-green-500">&rarr;</span>{" "}
-                        {answerStr}
-                      </p>
-                    </div>
-                  );
-                })}
-              </div>
-              {!allAnswered && (
-                <p className="mt-4 text-sm text-yellow-500">
-                  Please answer all questions before submitting
-                </p>
-              )}
-            </div>
-          ) : currentQuestion ? (
-            // Question tab
-            <div>
-              <h3 className="mb-4 font-medium text-foreground">
-                {currentQuestion.question}
-              </h3>
-              <div className="space-y-2">
-                {currentQuestion.options.map((option, idx) => {
-                  const answer = getAnswer(currentQuestion.question);
-                  const isSelected = currentQuestion.multiSelect
-                    ? Array.isArray(answer) && answer.includes(option.label)
-                    : answer === option.label;
-
-                  return (
-                    <button
-                      key={option.label}
-                      type="button"
-                      onClick={() =>
-                        selectOption(currentQuestion, option.label)
-                      }
-                      className={cn(
-                        "flex w-full items-start gap-3 rounded-lg border p-3 text-left transition-colors",
-                        isSelected
-                          ? "border-green-500 bg-green-500/10"
-                          : "border-border hover:border-primary hover:bg-accent",
-                      )}
-                    >
-                      <div
-                        className={cn(
-                          "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2",
-                          isSelected
-                            ? "border-green-500 bg-green-500"
-                            : "border-muted-foreground",
-                        )}
-                      >
-                        {isSelected && (
-                          <Check className="h-3 w-3 text-primary-foreground" />
-                        )}
-                      </div>
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2">
-                          <span className="text-xs text-muted-foreground">
-                            {idx + 1}.
-                          </span>
-                          <span
-                            className={cn(
-                              "font-medium",
-                              isSelected ? "text-green-500" : "text-foreground",
-                            )}
-                          >
-                            {option.label}
-                          </span>
-                        </div>
-                        {option.description && (
-                          <p className="mt-1 text-sm text-muted-foreground">
-                            {option.description}
-                          </p>
-                        )}
-                      </div>
-                    </button>
-                  );
-                })}
-
-                {/* "Other" option */}
-                <div
-                  className={cn(
-                    "rounded-lg border p-3 transition-colors",
-                    isOtherSelected
-                      ? "border-green-500 bg-green-500/10"
-                      : "border-border",
-                  )}
-                >
-                  <div className="flex items-center gap-3">
-                    <div
-                      className={cn(
-                        "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2",
-                        isOtherSelected
-                          ? "border-green-500 bg-green-500"
-                          : "border-muted-foreground",
-                      )}
-                    >
-                      {isOtherSelected && (
-                        <Check className="h-3 w-3 text-primary-foreground" />
-                      )}
-                    </div>
-                    <Input
-                      type="text"
-                      placeholder="Type something else..."
-                      value={otherText}
-                      onChange={(e) =>
-                        handleOtherInput(
-                          currentQuestion.question,
-                          e.target.value,
-                        )
-                      }
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter") {
-                          e.preventDefault();
-                          confirmOther(currentQuestion);
-                        }
-                      }}
-                      className="flex-1 border-0 bg-transparent px-2 py-0 focus-visible:ring-0"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          ) : null}
-        </div>
-
-        {/* Footer */}
-        <div className="mt-4 flex flex-col gap-2 border-t border-border pt-4 sm:flex-row sm:items-center sm:justify-between">
-          <p className="hidden text-xs text-muted-foreground sm:block">
-            1-4 select option &middot; Esc cancel
-          </p>
-          <div className="flex items-center justify-end gap-2">
-            <Button variant="ghost" size="sm" onClick={onCancel}>
-              <X className="mr-1 h-4 w-4" />
-              Cancel
-            </Button>
-            <Button
-              size="sm"
-              onClick={() => onSubmit(state.answers)}
-              disabled={!allAnswered}
-            >
-              <Check className="mr-1 h-4 w-4" />
-              Submit
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/bun.lock b/bun.lock
index a76e1c47f..ffa266bef 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "open-harness",

From 166a33446e949328add623a5376a3399d99f22d3 Mon Sep 17 00:00:00 2001
From: willsather <56037657+willsather@users.noreply.github.com>
Date: Sat, 11 Apr 2026 22:28:02 +0000
Subject: [PATCH 2/3] feat: improve mobile UX for Q&A and git panel
 interactions

---
 .../[sessionId]/chats/[chatId]/chat-tabs.tsx  | 21 ++++++++++--
 .../chats/[chatId]/git-panel-context.tsx      | 34 ++++++++++++-------
 apps/web/components/inbox-sidebar.tsx         |  4 ++-
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/apps/web/app/sessions/[sessionId]/chats/[chatId]/chat-tabs.tsx b/apps/web/app/sessions/[sessionId]/chats/[chatId]/chat-tabs.tsx
index 466b47842..c7ac8ff0e 100644
--- a/apps/web/app/sessions/[sessionId]/chats/[chatId]/chat-tabs.tsx
+++ b/apps/web/app/sessions/[sessionId]/chats/[chatId]/chat-tabs.tsx
@@ -26,6 +26,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { useGitPanel } from "./git-panel-context";
 
 type ChatTabsProps = {
@@ -51,6 +52,8 @@ export function ChatTabs({ activeChatId }: ChatTabsProps) {
     setFileTabDismissed,
   } = useGitPanel();
 
+  const isMobile = useIsMobile();
+
   const [renamingChatId, setRenamingChatId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState("");
   const [deletingChatId, setDeletingChatId] = useState<string | null>(null);
@@ -226,7 +229,10 @@ export function ChatTabs({ activeChatId }: ChatTabsProps) {
         <button
           type="button"
           onClick={handleCloseChanges}
-          className="mr-1 rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100"
+          className={cn(
+            "mr-1 rounded p-0.5 text-muted-foreground transition-opacity hover:bg-accent hover:text-foreground",
+            isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+          )}
         >
           <X className="h-3 w-3" />
         </button>
@@ -254,7 +260,10 @@ export function ChatTabs({ activeChatId }: ChatTabsProps) {
         <button
           type="button"
           onClick={handleCloseFile}
-          className="mr-1 rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100"
+          className={cn(
+            "mr-1 rounded p-0.5 text-muted-foreground transition-opacity hover:bg-accent hover:text-foreground",
+            isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+          )}
         >
           <X className="h-3 w-3" />
         </button>
@@ -326,7 +335,12 @@ export function ChatTabs({ activeChatId }: ChatTabsProps) {
           )}
 
           {!isRenaming && (
-            <div className="flex items-center gap-0.5 pr-1 opacity-0 transition-opacity group-hover:opacity-100">
+            <div
+              className={cn(
+                "flex items-center gap-0.5 pr-1 transition-opacity",
+                isMobile ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+              )}
+            >
               <button
                 type="button"
                 onClick={(e) => {
@@ -378,6 +392,7 @@ export function ChatTabs({ activeChatId }: ChatTabsProps) {
     handleFinishRename,
     handleStartRename,
     insertAt,
+    isMobile,
     prefetchChat,
     renameValue,
     renamingChatId,
diff --git a/apps/web/app/sessions/[sessionId]/chats/[chatId]/git-panel-context.tsx b/apps/web/app/sessions/[sessionId]/chats/[chatId]/git-panel-context.tsx
index e7458a1ab..ee6eb04ce 100644
--- a/apps/web/app/sessions/[sessionId]/chats/[chatId]/git-panel-context.tsx
+++ b/apps/web/app/sessions/[sessionId]/chats/[chatId]/git-panel-context.tsx
@@ -10,6 +10,7 @@ import {
   type ReactNode,
   type RefObject,
 } from "react";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 export type GitPanelTab = "diff" | "pr" | "files";
 export type ActiveView = "chat" | "diff" | "file";
@@ -83,6 +84,7 @@ const GitPanelContext = createContext<GitPanelContextValue | undefined>(
 );
 
 export function GitPanelProvider({ children }: { children: ReactNode }) {
+  const isMobile = useIsMobile();
   const [gitPanelOpen, setGitPanelOpen] = useState(false);
   const [gitPanelTab, setGitPanelTab] = useState<GitPanelTab>("files");
   const [activeView, setActiveView] = useState<ActiveView>("chat");
@@ -99,18 +101,26 @@ export function GitPanelProvider({ children }: { children: ReactNode }) {
   const panelPortalRef = useRef<HTMLDivElement | null>(null);
   const headerActionsRef = useRef<HTMLDivElement | null>(null);
 
-  const openDiffToFile = useCallback((filePath: string) => {
-    setFocusedDiffFile(filePath);
-    setFocusedDiffRequestId((prev) => prev + 1);
-    setActiveView("diff");
-    setChangesTabDismissed(false);
-  }, []);
-
-  const openFileTab = useCallback((filePath: string) => {
-    setFocusedFilePath(filePath);
-    setActiveView("file");
-    setFileTabDismissed(false);
-  }, []);
+  const openDiffToFile = useCallback(
+    (filePath: string) => {
+      setFocusedDiffFile(filePath);
+      setFocusedDiffRequestId((prev) => prev + 1);
+      setActiveView("diff");
+      setChangesTabDismissed(false);
+      if (isMobile) setGitPanelOpen(false);
+    },
+    [isMobile],
+  );
+
+  const openFileTab = useCallback(
+    (filePath: string) => {
+      setFocusedFilePath(filePath);
+      setActiveView("file");
+      setFileTabDismissed(false);
+      if (isMobile) setGitPanelOpen(false);
+    },
+    [isMobile],
+  );
 
   const value = useMemo(
     () => ({
diff --git a/apps/web/components/inbox-sidebar.tsx b/apps/web/components/inbox-sidebar.tsx
index 80a25d2b7..9ce39b324 100644
--- a/apps/web/components/inbox-sidebar.tsx
+++ b/apps/web/components/inbox-sidebar.tsx
@@ -1022,7 +1022,9 @@ export function InboxSidebar({
                         </span>
                       </button>
                       {hasRepo ? (
-                        <span className="hidden shrink-0 items-center gap-0.5 group-hover/repo:flex">
+                        <span
+                          className={`shrink-0 items-center gap-0.5 ${isMobile ? "flex" : "hidden group-hover/repo:flex"}`}
+                        >
                           <Tooltip>
                             <TooltipTrigger asChild>
                               <button

From cc9e9188fe9ede8d89cc28b644db499866d739b1 Mon Sep 17 00:00:00 2001
From: willsather <56037657+willsather@users.noreply.github.com>
Date: Sun, 12 Apr 2026 01:02:37 +0000
Subject: [PATCH 3/3] feat: close mobile sidebar on session creation

---
 apps/web/components/inbox-sidebar.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/inbox-sidebar.tsx b/apps/web/components/inbox-sidebar.tsx
index 9ce39b324..006ec54fa 100644
--- a/apps/web/components/inbox-sidebar.tsx
+++ b/apps/web/components/inbox-sidebar.tsx
@@ -863,9 +863,10 @@ export function InboxSidebar({
 
   const handleCreateForRepo = useCallback(
     (owner: string, repo: string) => {
+      if (isMobile) setOpenMobile(false);
       onCreateSessionForRepo(owner, repo);
     },
-    [onCreateSessionForRepo],
+    [isMobile, setOpenMobile, onCreateSessionForRepo],
   );
 
   const handleOpenBranchPicker = useCallback((owner: string, repo: string) => {
@@ -883,13 +884,14 @@ export function InboxSidebar({
           branch,
         );
         setBranchPickerRepo(null);
+        if (isMobile) setOpenMobile(false);
       } catch (error) {
         console.error("Failed to create session from branch:", error);
       } finally {
         setIsCreatingFromBranch(false);
       }
     },
-    [branchPickerRepo, onCreateSessionFromBranch],
+    [branchPickerRepo, onCreateSessionFromBranch, isMobile, setOpenMobile],
   );
 
   return (