feat(app): add context menu to file tabs with close, close others, an…

packages/app/src/components/session/session-sortable-tab.tsx

@@ -5,11 +5,20 @@ import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { Tabs } from "@opencode-ai/ui/tabs"
+import { ContextMenu } from "@opencode-ai/ui/context-menu"
 import { getFilename } from "@opencode-ai/util/path"
 import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
 import { useCommand } from "@/context/command"
 
+interface SortableTabProps {
+  readonly tab: string
+  readonly onTabClose: (tab: string) => void
+  readonly onMention?: (tab: string) => void
+  readonly onCloseOthers?: (currentTab: string) => void
+  readonly onClick?: () => void
+}
+
 export function FileVisual(props: { path: string; active?: boolean }): JSX.Element {
   return (
     <div class="flex items-center gap-x-1.5 min-w-0">
@@ -25,7 +34,7 @@ export function FileVisual(props: { path: string; active?: boolean }): JSX.Eleme
   )
 }
 
-export function SortableTab(props: { tab: string; onTabClose: (tab: string) => void }): JSX.Element {
+export function SortableTab(props: SortableTabProps): JSX.Element {
   const file = useFile()
   const language = useLanguage()
   const command = useCommand()
@@ -35,28 +44,76 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
     // @ts-ignore
     <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
       <div class="relative h-full">
-        <Tabs.Trigger
-          value={props.tab}
-          closeButton={
-            <TooltipKeybind
-              title={language.t("common.closeTab")}
-              keybind={command.keybind("tab.close")}
-              placement="bottom"
+        <Show
+          when={props.onMention}
+          fallback={
+            <Tabs.Trigger
+              value={props.tab}
+              closeButton={
+                <TooltipKeybind
+                  title={language.t("common.closeTab")}
+                  keybind={command.keybind("tab.close")}
+                  placement="bottom"
+                >
+                  <IconButton
+                    icon="close-small"
+                    variant="ghost"
+                    class="h-5 w-5"
+                    onClick={() => props.onTabClose(props.tab)}
+                    aria-label={language.t("common.closeTab")}
+                  />
+                </TooltipKeybind>
+              }
+              hideCloseButton
+              onMiddleClick={() => props.onTabClose(props.tab)}
             >
-              <IconButton
-                icon="close-small"
-                variant="ghost"
-                class="h-5 w-5"
-                onClick={() => props.onTabClose(props.tab)}
-                aria-label={language.t("common.closeTab")}
-              />
-            </TooltipKeybind>
+              <Show when={path()}>{(p) => <FileVisual path={p()} />}</Show>
+            </Tabs.Trigger>
           }
-          hideCloseButton
-          onMiddleClick={() => props.onTabClose(props.tab)}
         >
-          <Show when={path()}>{(p) => <FileVisual path={p()} />}</Show>
-        </Tabs.Trigger>
+          <ContextMenu>
+            <ContextMenu.Trigger
+              as={Tabs.Trigger}
+              value={props.tab}
+              closeButton={
+                <TooltipKeybind
+                  title={language.t("common.closeTab")}
+                  keybind={command.keybind("tab.close")}
+                  placement="bottom"
+                >
+                  <IconButton
+                    icon="close-small"
+                    variant="ghost"
+                    class="h-5 w-5"
+                    onClick={() => props.onTabClose(props.tab)}
+                    aria-label={language.t("common.closeTab")}
+                  />
+                </TooltipKeybind>
+              }
+              hideCloseButton
+              onMiddleClick={() => props.onTabClose(props.tab)}
+              onClick={props.onClick}
+            >
+              <Show when={path()}>{(p) => <FileVisual path={p()} />}</Show>
+            </ContextMenu.Trigger>
+            <ContextMenu.Portal>
+              <ContextMenu.Content>
+                <ContextMenu.Item onSelect={() => props.onTabClose(props.tab)}>
+                  <ContextMenu.ItemLabel>{language.t("common.close")}</ContextMenu.ItemLabel>
+                </ContextMenu.Item>
+                <Show when={props.onCloseOthers}>
+                  <ContextMenu.Item onSelect={() => props.onCloseOthers?.(props.tab)}>
+                    <ContextMenu.ItemLabel>{language.t("tab.context.closeOthers")}</ContextMenu.ItemLabel>
+                  </ContextMenu.Item>
+                </Show>
+                <ContextMenu.Separator />
+                <ContextMenu.Item onSelect={() => props.onMention?.(props.tab)}>
+                  <ContextMenu.ItemLabel>{language.t("session.files.mention")}</ContextMenu.ItemLabel>
+                </ContextMenu.Item>
+              </ContextMenu.Content>
+            </ContextMenu.Portal>
+          </ContextMenu>
+        </Show>
       </div>
     </div>
   )

packages/app/src/context/layout.tsx

@@ -815,6 +815,17 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
               setStore("sessionTabs", session, "active", next)
             })
           },
+          closeOthers(tab: string) {
+            const session = key()
+            const current = store.sessionTabs[session]
+            if (!current) return
+            const all = [tab, "context", "review"].filter((x) => current.all.includes(x))
+            const active = current.active === tab || all.includes(current.active!) ? current.active! : tab
+            batch(() => {
+              setStore("sessionTabs", session, "all", all)
+              setStore("sessionTabs", session, "active", active)
+            })
+          },
           move(tab: string, to: number) {
             const session = key()
             const current = store.sessionTabs[session]

packages/app/src/i18n/ar.ts

@@ -416,6 +416,8 @@ export const dict = {
   "session.tab.session": "جلسة",
   "session.tab.review": "مراجعة",
   "session.tab.context": "سياق",
+  "tab.context.closeOthers": "إغلاق البقية",
+  "session.files.mention": "إشارة",
   "session.panel.reviewAndFiles": "المراجعة والملفات",
   "session.review.filesChanged": "تم تغيير {{count}} ملفات",
   "session.review.change.one": "تغيير",

packages/app/src/i18n/br.ts

@@ -417,6 +417,8 @@ export const dict = {
   "session.tab.session": "Sessão",
   "session.tab.review": "Revisão",
   "session.tab.context": "Contexto",
+  "tab.context.closeOthers": "Fechar outras",
+  "session.files.mention": "Mencionar",
   "session.panel.reviewAndFiles": "Revisão e arquivos",
   "session.review.filesChanged": "{{count}} Arquivos Alterados",
   "session.review.change.one": "Alteração",

packages/app/src/i18n/bs.ts

@@ -444,6 +444,8 @@ export const dict = {
   "session.tab.session": "Sesija",
   "session.tab.review": "Pregled",
   "session.tab.context": "Kontekst",
+  "tab.context.closeOthers": "Zatvori ostale",
+  "session.files.mention": "Spomeni",
   "session.panel.reviewAndFiles": "Pregled i datoteke",
   "session.review.filesChanged": "Izmijenjeno {{count}} datoteka",
   "session.review.change.one": "Izmjena",

packages/app/src/i18n/da.ts

@@ -418,6 +418,8 @@ export const dict = {
   "session.tab.session": "Session",
   "session.tab.review": "Gennemgang",
   "session.tab.context": "Kontekst",
+  "tab.context.closeOthers": "Luk andre",
+  "session.files.mention": "Nævn",
   "session.panel.reviewAndFiles": "Gennemgang og filer",
   "session.review.filesChanged": "{{count}} Filer ændret",
   "session.review.change.one": "Ændring",

packages/app/src/i18n/de.ts

@@ -460,6 +460,8 @@ export const dict = {
   "session.tab.session": "Sitzung",
   "session.tab.review": "Überprüfung",
   "session.tab.context": "Kontext",
+  "tab.context.closeOthers": "Andere schließen",
+  "session.files.mention": "Erwähnen",
   "session.panel.reviewAndFiles": "Überprüfung und Dateien",
   "session.review.filesChanged": "{{count}} Dateien geändert",
   "session.review.change.one": "Änderung",

packages/app/src/i18n/en.ts

@@ -481,6 +481,8 @@ export const dict = {
   "session.tab.session": "Session",
   "session.tab.review": "Review",
   "session.tab.context": "Context",
+  "tab.context.closeOthers": "Close others",
+  "session.files.mention": "Mention",
   "session.panel.reviewAndFiles": "Review and files",
   "session.review.filesChanged": "{{count}} Files Changed",
   "session.review.change.one": "Change",

packages/app/src/i18n/es.ts

@@ -420,6 +420,8 @@ export const dict = {
   "session.tab.session": "Sesión",
   "session.tab.review": "Revisión",
   "session.tab.context": "Contexto",
+  "tab.context.closeOthers": "Cerrar otras",
+  "session.files.mention": "Mencionar",
   "session.panel.reviewAndFiles": "Revisión y archivos",
   "session.review.filesChanged": "{{count}} Archivos Cambiados",
   "session.review.change.one": "Cambio",

packages/app/src/i18n/fr.ts

@@ -425,6 +425,8 @@ export const dict = {
   "session.tab.session": "Session",
   "session.tab.review": "Revue",
   "session.tab.context": "Contexte",
+  "tab.context.closeOthers": "Fermer les autres",
+  "session.files.mention": "Mentionner",
   "session.panel.reviewAndFiles": "Revue et fichiers",
   "session.review.filesChanged": "{{count}} fichiers modifiés",
   "session.review.change.one": "Modification",

packages/app/src/i18n/ja.ts

@@ -412,6 +412,8 @@ export const dict = {
   "session.tab.session": "セッション",
   "session.tab.review": "レビュー",
   "session.tab.context": "コンテキスト",
+  "tab.context.closeOthers": "他のタブを閉じる",
+  "session.files.mention": "メンション",
   "session.panel.reviewAndFiles": "レビューとファイル",
   "session.review.filesChanged": "{{count}} ファイル変更",
   "session.review.change.one": "変更",

packages/app/src/i18n/ko.ts

@@ -419,6 +419,8 @@ export const dict = {
   "session.tab.session": "세션",
   "session.tab.review": "검토",
   "session.tab.context": "컨텍스트",
+  "tab.context.closeOthers": "다른 탭 닫기",
+  "session.files.mention": "멘션",
   "session.panel.reviewAndFiles": "검토 및 파일",
   "session.review.filesChanged": "{{count}}개 파일 변경됨",
   "session.review.change.one": "변경",

packages/app/src/i18n/no.ts

@@ -420,6 +420,8 @@ export const dict = {
   "session.tab.session": "Sesjon",
   "session.tab.review": "Gjennomgang",
   "session.tab.context": "Kontekst",
+  "tab.context.closeOthers": "Lukk andre",
+  "session.files.mention": "Nevn",
   "session.panel.reviewAndFiles": "Gjennomgang og filer",
   "session.review.filesChanged": "{{count}} filer endret",
   "session.review.change.one": "Endring",

packages/app/src/i18n/pl.ts

@@ -419,6 +419,8 @@ export const dict = {
   "session.tab.session": "Sesja",
   "session.tab.review": "Przegląd",
   "session.tab.context": "Kontekst",
+  "tab.context.closeOthers": "Zamknij pozostałe",
+  "session.files.mention": "Wspomnij",
   "session.panel.reviewAndFiles": "Przegląd i pliki",
   "session.review.filesChanged": "Zmieniono {{count}} plików",
   "session.review.change.one": "Zmiana",

packages/app/src/i18n/ru.ts

@@ -421,6 +421,8 @@ export const dict = {
   "session.tab.session": "Сессия",
   "session.tab.review": "Обзор",
   "session.tab.context": "Контекст",
+  "tab.context.closeOthers": "Закрыть остальные",
+  "session.files.mention": "Упомянуть",
   "session.panel.reviewAndFiles": "Обзор и файлы",
   "session.review.filesChanged": "{{count}} файлов изменено",
   "session.review.change.one": "Изменение",

packages/app/src/i18n/th.ts

@@ -421,6 +421,8 @@ export const dict = {
   "session.tab.session": "เซสชัน",
   "session.tab.review": "ตรวจสอบ",
   "session.tab.context": "บริบท",
+  "tab.context.closeOthers": "ปิดแท็บอื่นๆ",
+  "session.files.mention": "กล่าวถึง",
   "session.panel.reviewAndFiles": "ตรวจสอบและไฟล์",
   "session.review.filesChanged": "{{count}} ไฟล์ที่เปลี่ยนแปลง",
   "session.review.change.one": "การเปลี่ยนแปลง",

packages/app/src/i18n/zh.ts

@@ -456,6 +456,8 @@ export const dict = {
   "session.tab.session": "会话",
   "session.tab.review": "审查",
   "session.tab.context": "上下文",
+  "tab.context.closeOthers": "关闭其他",
+  "session.files.mention": "提及",
   "session.panel.reviewAndFiles": "审查和文件",
   "session.review.filesChanged": "{{count}} 个文件变更",
   "session.review.change.one": "更改",

packages/app/src/i18n/zht.ts

@@ -453,6 +453,8 @@ export const dict = {
   "session.tab.session": "工作階段",
   "session.tab.review": "審查",
   "session.tab.context": "上下文",
+  "tab.context.closeOthers": "關閉其他",
+  "session.files.mention": "提及",
   "session.panel.reviewAndFiles": "審查與檔案",
   "session.review.filesChanged": "{{count}} 個檔案變更",
   "session.review.change.one": "變更",

packages/app/src/pages/session.tsx

@@ -780,6 +780,63 @@ export default function Page() {
     prompt.context.add({ type: "file", path, selection, preview })
   }
 
+  const mentionTabInPrompt = (tab: string) => {
+    const path = file.pathFromTab(tab)
+    if (!path) return
+    const content = "@" + path
+    const current = prompt.current()
+    const textLength = current.reduce((len, part) => len + ("content" in part ? part.content.length : 0), 0)
+
+    const needsSpace =
+      textLength > 0 &&
+      !current.some((part) => {
+        if (part.type !== "text") return false
+        return part.content.endsWith(" ") || part.content.endsWith("\n")
+      })
+
+    const parts = [...current]
+    let position = textLength
+
+    if (needsSpace) {
+      const lastTextIndex = parts.findLastIndex((p) => p.type === "text")
+      if (lastTextIndex >= 0) {
+        const lastText = parts[lastTextIndex]
+        if (lastText.type === "text") {
+          parts[lastTextIndex] = {
+            ...lastText,
+            content: lastText.content + " ",
+            end: lastText.end + 1,
+          }
+          position += 1
+        }
+      } else {
+        parts.push({ type: "text", content: " ", start: position, end: position + 1 })
+        position += 1
+      }
+    }
+
+    parts.push({
+      type: "file",
+      path,
+      content,
+      start: position,
+      end: position + content.length,
+    })
+    position += content.length
+
+    parts.push({ type: "text", content: " ", start: position, end: position + 1 })
+    position += 1
+
+    prompt.set(parts, position)
+  }
+
+  const closeOtherTabs = (currentTab: string) => {
+    const others = openedTabs().filter((tab) => tab !== currentTab)
+    for (const tab of others) {
+      tabs().close(tab)
+    }
+  }
+
   const addCommentToContext = (input: {
     file: string
     selection: SelectedLineRange
@@ -1727,6 +1784,8 @@ export default function Page() {
           kinds={kinds()}
           activeDiff={tree.activeDiff}
           focusReviewDiff={focusReviewDiff}
+          onMention={mentionTabInPrompt}
+          onCloseOthers={closeOtherTabs}
         />
       </div>
 

packages/app/src/pages/session/session-side-panel.tsx

@@ -67,18 +67,15 @@ export function SessionSidePanel(props: {
   kinds: Map<string, "add" | "del" | "mix">
   activeDiff?: string
   focusReviewDiff: (path: string) => void
+  onMention?: (tab: string) => void
+  onCloseOthers?: (tab: string) => void
 }) {
   return (
     <Show when={props.open}>
       <aside
         id="review-panel"
         aria-label={props.language.t("session.panel.reviewAndFiles")}
         class="relative min-w-0 h-full border-l border-border-weak-base flex"
-        classList={{
-          "flex-1": props.reviewOpen,
-          "shrink-0": !props.reviewOpen,
-        }}
-        style={{ width: props.reviewOpen ? undefined : `${props.layout.fileTree.width()}px` }}
       >
         <Show when={props.reviewOpen}>
           <div class="flex-1 min-w-0 h-full">
@@ -138,7 +135,15 @@ export function SessionSidePanel(props: {
                         </Show>
                         <SortableProvider ids={props.openedTabs()}>
                           <For each={props.openedTabs()}>
-                            {(tab) => <SortableTab tab={tab} onTabClose={props.tabs().close} />}
+                            {(tab) => (
+                              <SortableTab
+                                tab={tab}
+                                onTabClose={props.tabs().close}
+                                onMention={props.onMention}
+                                onCloseOthers={props.onCloseOthers}
+                                onClick={() => props.openTab(tab)}
+                              />
+                            )}
                           </For>
                         </SortableProvider>
                         <StickyAddButton>