-
- {Icon &&
}
- {selectedRepository.git_provider === "azure_devops" && (
-
- )}
+
+ {repository ? (
- {selectedRepository.selected_repository}
+ {(Icon || selectedRepository.git_provider === "azure_devops") && (
+
+ {Icon ? (
+
+ ) : (
+
+ )}
+
+ )}
+ {repository}
-
-
-
-
+ ) : null}
+ {branch ? (
- {selectedRepository.selected_branch}
+
+
+
+ {branch}
-
+ ) : null}
);
}
diff --git a/src/components/features/conversation-panel/conversation-card/conversation-tag-chips.tsx b/src/components/features/conversation-panel/conversation-card/conversation-tag-chips.tsx
new file mode 100644
index 0000000000..a974ceb8fa
--- /dev/null
+++ b/src/components/features/conversation-panel/conversation-card/conversation-tag-chips.tsx
@@ -0,0 +1,336 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import { cn } from "#/utils/utils";
+import {
+ computeVisibleTagChipCount,
+ formatConversationTagTooltip,
+ getConversationTagLabel,
+ truncateTagChipValue,
+} from "./conversation-tag-display";
+import {
+ getConversationTagIcon,
+ type ConversationTagIcon,
+} from "./conversation-tag-icons";
+import {
+ CONVERSATION_CARD_META_CHIP_CLASSNAME,
+ CONVERSATION_CARD_META_CHIP_ICON_CLASSNAME,
+ CONVERSATION_CARD_META_CHIP_ICON_SLOT_CLASSNAME,
+} from "./conversation-card-meta-chip";
+
+interface ConversationTagChipsProps {
+ tags: Array<[string, string]>;
+}
+
+/**
+ * Fixed line-height slot so Lucide / react-icons / local SVGs share the same
+ * optical center as the ``leading-4`` chip / overflow text (raw ``h-3 w-3``
+ * SVGs sit on the baseline and look high or low depending on the glyph).
+ */
+function TagIconSlot({
+ icon: Icon,
+ keyName,
+ testId,
+}: {
+ icon: ConversationTagIcon;
+ keyName?: string;
+ testId?: string;
+}) {
+ return (
+
+
+
+ );
+}
+
+function TagChipContent({
+ icon,
+ keyName,
+ value,
+ iconTestId,
+}: {
+ icon: ConversationTagIcon;
+ keyName: string;
+ value: string;
+ /**
+ * Only the visible row passes this. The off-screen measure row renders the
+ * same chips, so tagging both would emit every chip test id twice and break
+ * ``getByTestId`` (singular) for any card with tags.
+ */
+ iconTestId?: string;
+}) {
+ return (
+ <>
+
+
{truncateTagChipValue(value)}
+
+ );
+}
+
+/**
+ * Single-row tag chips for a conversation card. Chip labels are value-only
+ * (key lives in the tooltip); chips that do not fit fold behind a ``+N``
+ * button that opens a key/value popover.
+ *
+ * The overflow popover is portaled with ``position: fixed`` so it is not
+ * clipped by the chip row's ``overflow-hidden`` or the sidebar scroller.
+ */
+export function ConversationTagChips({ tags }: ConversationTagChipsProps) {
+ const { t } = useTranslation("openhands");
+ const containerRef = React.useRef
(null);
+ const measureRef = React.useRef(null);
+ const triggerRef = React.useRef(null);
+ const popoverRef = React.useRef(null);
+ const [visibleCount, setVisibleCount] = React.useState(tags.length);
+ const [isOverflowOpen, setIsOverflowOpen] = React.useState(false);
+ const [popoverBox, setPopoverBox] = React.useState<{
+ top: number;
+ left: number;
+ } | null>(null);
+
+ const recomputeVisibleCount = React.useCallback(() => {
+ const container = containerRef.current;
+ const measure = measureRef.current;
+ if (!container || !measure) {
+ return;
+ }
+
+ const widths = Array.from(measure.children).map(
+ (child) => (child as HTMLElement).offsetWidth,
+ );
+ setVisibleCount(computeVisibleTagChipCount(widths, container.clientWidth));
+ }, []);
+
+ const measurePopover = React.useCallback(() => {
+ const trigger = triggerRef.current;
+ if (!trigger) {
+ return;
+ }
+ const rect = trigger.getBoundingClientRect();
+ const gutter = 8;
+ const width = 16 * 16;
+ let left = rect.left;
+ if (left + width > window.innerWidth - gutter) {
+ left = Math.max(gutter, window.innerWidth - gutter - width);
+ }
+ setPopoverBox({ top: rect.bottom + 4, left });
+ }, []);
+
+ // Callers build this array fresh on every render (``getDisplayConversationTags``
+ // returns a new array), so keying the reset effect on ``tags`` identity would
+ // fire on every parent render — closing an open ``+N`` popover and forcing a
+ // layout read on each 10s panel refetch. Compare tag *content* instead.
+ const tagsKey = tags.map(([key, value]) => `${key}=${value}`).join("\u001f");
+ const lastTagsKeyRef = React.useRef(null);
+
+ React.useLayoutEffect(() => {
+ if (lastTagsKeyRef.current === tagsKey) {
+ return;
+ }
+ lastTagsKeyRef.current = tagsKey;
+ setIsOverflowOpen(false);
+ recomputeVisibleCount();
+ }, [tagsKey, recomputeVisibleCount]);
+
+ React.useEffect(() => {
+ const container = containerRef.current;
+ if (!container || typeof ResizeObserver === "undefined") {
+ return undefined;
+ }
+
+ const observer = new ResizeObserver(() => recomputeVisibleCount());
+ observer.observe(container);
+ return () => observer.disconnect();
+ }, [recomputeVisibleCount]);
+
+ React.useLayoutEffect(() => {
+ if (!isOverflowOpen) {
+ setPopoverBox(null);
+ return undefined;
+ }
+ measurePopover();
+ window.addEventListener("resize", measurePopover);
+ window.addEventListener("scroll", measurePopover, true);
+ return () => {
+ window.removeEventListener("resize", measurePopover);
+ window.removeEventListener("scroll", measurePopover, true);
+ };
+ }, [isOverflowOpen, measurePopover]);
+
+ React.useEffect(() => {
+ if (!isOverflowOpen) {
+ return undefined;
+ }
+ const onPointerDown = (event: MouseEvent) => {
+ const target = event.target as Node;
+ if (triggerRef.current?.contains(target)) {
+ return;
+ }
+ if (popoverRef.current?.contains(target)) {
+ return;
+ }
+ setIsOverflowOpen(false);
+ };
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (event.key === "Escape") {
+ setIsOverflowOpen(false);
+ }
+ };
+ // mousedown (not click) so the opening click cannot race-close the panel,
+ // and so NavigationLink activation is easier to cancel on the trigger.
+ document.addEventListener("mousedown", onPointerDown);
+ document.addEventListener("keydown", onKeyDown);
+ return () => {
+ document.removeEventListener("mousedown", onPointerDown);
+ document.removeEventListener("keydown", onKeyDown);
+ };
+ }, [isOverflowOpen]);
+
+ if (tags.length === 0) {
+ return null;
+ }
+
+ const hiddenCount = Math.max(0, tags.length - visibleCount);
+ const visibleTags = tags.slice(0, visibleCount);
+ const overflowTags = tags.slice(visibleCount);
+
+ const stopCardNavigation = (event: React.SyntheticEvent) => {
+ // Don't preventDefault on mousedown — that suppresses the subsequent click
+ // when the chip sits inside a conversation NavigationLink.
+ event.stopPropagation();
+ };
+
+ const activateOverflow = (event: React.MouseEvent) => {
+ event.preventDefault();
+ event.stopPropagation();
+ setIsOverflowOpen((open) => !open);
+ };
+
+ return (
+
+
+ {tags.map(([key, value]) => (
+
+
+
+ ))}
+
+
+
+ {visibleTags.map(([key, value]) => (
+
+
+
+ ))}
+ {hiddenCount > 0 ? (
+
+ ) : null}
+
+
+ {isOverflowOpen &&
+ popoverBox &&
+ typeof document !== "undefined" &&
+ createPortal(
+ // Stop card-level click activation when interacting with the list.
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- dialog surface must swallow clicks
+
{
+ event.preventDefault();
+ event.stopPropagation();
+ }}
+ >
+
+ {overflowTags.map(([key, value]) => (
+
+
-
+
+
+ {getConversationTagLabel(key, t)}
+
+
+ -
+ {value}
+
+
+ ))}
+
+
,
+ document.body,
+ )}
+
-
-
+
+
+
+
+
{t(I18nKey.COMMON$NO_REPOSITORY)}
-
+
);
}
diff --git a/src/components/features/conversation-panel/conversation-panel-filter-menu.tsx b/src/components/features/conversation-panel/conversation-panel-filter-menu.tsx
index 172e37cc2a..b726d379f7 100644
--- a/src/components/features/conversation-panel/conversation-panel-filter-menu.tsx
+++ b/src/components/features/conversation-panel/conversation-panel-filter-menu.tsx
@@ -323,16 +323,6 @@ export function ConversationPanelFilterMenu({
{t(I18nKey.CONVERSATION_PANEL$METADATA)}
- {
- toggleShowLlmProfiles();
- setFilterMenuOpen(false);
- }}
- />
+ {
+ toggleShowLlmProfiles();
+ setFilterMenuOpen(false);
+ }}
+ />
}
>
diff --git a/src/i18n/translation.json b/src/i18n/translation.json
index 8899e70ee0..789849d3f0 100644
--- a/src/i18n/translation.json
+++ b/src/i18n/translation.json
@@ -37212,6 +37212,142 @@
"uk": "Змінити порядок {{name}}",
"ca": "Reordenar {{name}}"
},
+ "CONVERSATION$TAGS_OVERFLOW_ARIA": {
+ "en": "Show {{count}} more tags",
+ "ja": "他に{{count}}件のタグを表示",
+ "zh-CN": "显示另外 {{count}} 个标签",
+ "zh-TW": "顯示另外 {{count}} 個標籤",
+ "ko-KR": "태그 {{count}}개 더 보기",
+ "no": "Vis {{count}} flere etiketter",
+ "ar": "عرض {{count}} وسوم إضافية",
+ "de": "{{count}} weitere Tags anzeigen",
+ "fr": "Afficher {{count}} étiquettes de plus",
+ "it": "Mostra altri {{count}} tag",
+ "pt": "Mostrar mais {{count}} etiquetas",
+ "es": "Mostrar {{count}} etiquetas más",
+ "ca": "Mostra {{count}} etiquetes més",
+ "tr": "{{count}} etiket daha göster",
+ "uk": "Показати ще {{count}} тегів"
+ },
+ "CONVERSATION_PANEL$PREVIEW_GIT": {
+ "en": "Git",
+ "ja": "Git",
+ "zh-CN": "Git",
+ "zh-TW": "Git",
+ "ko-KR": "Git",
+ "no": "Git",
+ "ar": "Git",
+ "de": "Git",
+ "fr": "Git",
+ "it": "Git",
+ "pt": "Git",
+ "es": "Git",
+ "ca": "Git",
+ "tr": "Git",
+ "uk": "Git"
+ },
+ "CONVERSATION_PANEL$PREVIEW_REPO": {
+ "en": "Repo",
+ "ja": "リポジトリ",
+ "zh-CN": "仓库",
+ "zh-TW": "倉庫",
+ "ko-KR": "저장소",
+ "no": "Repo",
+ "ar": "المستودع",
+ "de": "Repo",
+ "fr": "Dépôt",
+ "it": "Repo",
+ "pt": "Repo",
+ "es": "Repo",
+ "ca": "Repo",
+ "tr": "Depo",
+ "uk": "Репо"
+ },
+ "CONVERSATION_PANEL$PREVIEW_BRANCH": {
+ "en": "Branch",
+ "ja": "ブランチ",
+ "zh-CN": "分支",
+ "zh-TW": "分支",
+ "ko-KR": "브랜치",
+ "no": "Gren",
+ "ar": "الفرع",
+ "de": "Branch",
+ "fr": "Branche",
+ "it": "Ramo",
+ "pt": "Ramo",
+ "es": "Rama",
+ "ca": "Branca",
+ "tr": "Dal",
+ "uk": "Гілка"
+ },
+ "CONVERSATION_PANEL$PREVIEW_WORKSPACE": {
+ "en": "Workspace",
+ "ja": "ワークスペース",
+ "zh-CN": "工作区",
+ "zh-TW": "工作區",
+ "ko-KR": "워크스페이스",
+ "no": "Arbeidsområde",
+ "ar": "مساحة العمل",
+ "de": "Arbeitsbereich",
+ "fr": "Espace de travail",
+ "it": "Workspace",
+ "pt": "Espaço de trabalho",
+ "es": "Espacio de trabajo",
+ "ca": "Espai de treball",
+ "tr": "Çalışma alanı",
+ "uk": "Робочий простір"
+ },
+ "CONVERSATION_PANEL$PREVIEW_APP_MODE": {
+ "en": "App mode",
+ "ja": "アプリモード",
+ "zh-CN": "应用模式",
+ "zh-TW": "應用模式",
+ "ko-KR": "앱 모드",
+ "no": "App-modus",
+ "ar": "وضع التطبيق",
+ "de": "App-Modus",
+ "fr": "Mode app",
+ "it": "Modalità app",
+ "pt": "Modo do app",
+ "es": "Modo de la app",
+ "ca": "Mode de l'app",
+ "tr": "Uygulama modu",
+ "uk": "Режим застосунку"
+ },
+ "CONVERSATION_PANEL$PREVIEW_WORK_TOOLS": {
+ "en": "Work tools",
+ "ja": "ワークツール",
+ "zh-CN": "工作工具",
+ "zh-TW": "工作工具",
+ "ko-KR": "작업 도구",
+ "no": "Arbeidsverktøy",
+ "ar": "أدوات العمل",
+ "de": "Arbeitswerkzeuge",
+ "fr": "Outils de travail",
+ "it": "Strumenti di lavoro",
+ "pt": "Ferramentas de trabalho",
+ "es": "Herramientas de trabajo",
+ "ca": "Eines de treball",
+ "tr": "Çalışma araçları",
+ "uk": "Робочі інструменти"
+ },
+ "CONVERSATION_PANEL$PREVIEW_WORK_WSID": {
+ "en": "Workspace ID",
+ "ja": "ワークスペース ID",
+ "zh-CN": "工作区 ID",
+ "zh-TW": "工作區 ID",
+ "ko-KR": "워크스페이스 ID",
+ "no": "Arbeidsområde-ID",
+ "ar": "معرّف مساحة العمل",
+ "de": "Arbeitsbereichs-ID",
+ "fr": "ID d'espace de travail",
+ "it": "ID workspace",
+ "pt": "ID do espaço de trabalho",
+ "es": "ID del espacio de trabajo",
+ "ca": "ID de l'espai de treball",
+ "tr": "Çalışma alanı kimliği",
+ "uk": "ID робочого простору"
+ },
"SETTINGS$VERSION_NPM_RECOMMENDED": {
"en": "npm",
"ja": "npm",
diff --git a/src/stores/conversation-panel-preferences-store.ts b/src/stores/conversation-panel-preferences-store.ts
index fe0e79237e..383f97bb39 100644
--- a/src/stores/conversation-panel-preferences-store.ts
+++ b/src/stores/conversation-panel-preferences-store.ts
@@ -59,8 +59,8 @@ type ConversationPanelPreferencesStore = ConversationPanelPreferencesState &
const initialState: ConversationPanelPreferencesState = {
showOlderConversations: true,
showRepoBranchMetadata: false,
- showLlmProfiles: true,
- showTagsMetadata: true,
+ showLlmProfiles: false,
+ showTagsMetadata: false,
showHoverMetadata: true,
organizeMode: "chronological",
conversationSort: "updated",