@tldiagram/core-ui 1.95.1 → 2.0.0

package/src/components/CodePreviewPanel.tsx

@@ -2,6 +2,24 @@ import { useEffect, useState, useRef } from 'react'
 import type { SVGProps } from 'react'
 import { Box, Button, CloseButton, HStack, Icon, Spinner, Text, Tooltip, VStack } from '@chakra-ui/react'
 import { ExternalLinkIcon } from '@chakra-ui/icons'
+import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'
+import { EditorView } from '@codemirror/view'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { javascript } from '@codemirror/lang-javascript'
+import { python } from '@codemirror/lang-python'
+import { cpp } from '@codemirror/lang-cpp'
+import { java } from '@codemirror/lang-java'
+import { rust } from '@codemirror/lang-rust'
+
+import SlidingPanel from './SlidingPanel'
+import { api } from '../api/client'
+import { findSymbolByName, getParser, detectLanguage, type SupportedLanguage } from '../utils/treesitter'
+import { githubCache } from '../utils/githubCache'
+import { getGithubRepoVisibility } from '../utils/githubApi'
+import { parseRepoSlug } from '../utils/url'
+import { useSourceEditor } from '../utils/sourceEditor'
+import { toast } from '../utils/toast'
+import type { PlacedElement } from '../types'
 
 const GithubIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
@@ -34,18 +52,6 @@ const customCodeTheme = EditorView.theme({
     caretColor: "var(--chakra-colors-blue-400)",
   }
 }, { dark: true })
-import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'
-import { EditorView } from '@codemirror/view'
-import { oneDark } from '@codemirror/theme-one-dark'
-import { javascript } from '@codemirror/lang-javascript'
-import { python } from '@codemirror/lang-python'
-import { cpp } from '@codemirror/lang-cpp'
-import { java } from '@codemirror/lang-java'
-import { rust } from '@codemirror/lang-rust'
-
-import SlidingPanel from './SlidingPanel'
-import { findSymbolByName, getParser, detectLanguage, type SupportedLanguage } from '../utils/treesitter'
-import type { PlacedElement } from '../types'
 
 interface Props {
   isOpen: boolean
@@ -69,9 +75,15 @@ function parseAnchor(anchorStr: string):
   return { kind: 'none' }
 }
 
-import { githubCache } from '../utils/githubCache'
-import { getGithubRepoVisibility } from '../utils/githubApi'
-import { parseRepoSlug } from '../utils/url'
+function inferLineFromDescription(description: string | null | undefined, basePath: string): number | null {
+  if (!description || !basePath) return null
+  const match = description.match(/:(\d+)(?::\d+)?$/)
+  if (!match) return null
+  const pathPart = description.slice(0, match.index)
+  if (pathPart && pathPart !== basePath) return null
+  const line = Number(match[1])
+  return Number.isFinite(line) && line > 0 ? line : null
+}
 
 export default function CodePreviewPanel({ isOpen, onClose, element, hasBackdrop = true }: Props) {
   const [code, setCode] = useState('')
@@ -80,6 +92,8 @@ export default function CodePreviewPanel({ isOpen, onClose, element, hasBackdrop
   const [resolvedStartLine, setResolvedStartLine] = useState<number | null>(null)
   const [resolvedEndLine, setResolvedEndLine] = useState<number | null>(null)
   const [isPrivateRepo, setIsPrivateRepo] = useState(false)
+  const [openingEditor, setOpeningEditor] = useState(false)
+  const { editor: sourceEditor } = useSourceEditor()
 
   const editorRef = useRef<ReactCodeMirrorRef>(null)
 
@@ -88,6 +102,10 @@ export default function CodePreviewPanel({ isOpen, onClose, element, hasBackdrop
   const basePath = hashIdx >= 0 ? filePath.slice(0, hashIdx) : filePath
   const symbolInfoStr = hashIdx >= 0 ? filePath.slice(hashIdx + 1) : ''
   const repoSlug = element?.repo ? parseRepoSlug(element.repo) : ''
+  const anchor = parseAnchor(symbolInfoStr)
+  const anchorStartLine = anchor.kind === 'lines' ? anchor.startLine : null
+  const fallbackStartLine = inferLineFromDescription(element?.description, basePath)
+  const editorStartLine = resolvedStartLine ?? anchorStartLine ?? fallbackStartLine
 
   useEffect(() => {
     if (!isOpen || !element || !repoSlug || !basePath) return
@@ -205,9 +223,31 @@ export default function CodePreviewPanel({ isOpen, onClose, element, hasBackdrop
 
   const githubUrl = element?.repo && basePath
     ? `https://github.com/${repoSlug}/blob/${element.branch || 'main'}/${basePath}`
-    + (resolvedStartLine ? `#L${resolvedStartLine}-L${resolvedEndLine ?? resolvedStartLine}` : '')
+    + (editorStartLine ? `#L${editorStartLine}-L${resolvedEndLine ?? editorStartLine}` : '')
     : null
 
+  const handleOpenInEditor = async () => {
+    if (!basePath) return
+    setOpeningEditor(true)
+    try {
+      await api.editor.open({
+        editor: sourceEditor,
+        repo: element?.repo ?? '',
+        file_path: basePath,
+        line: editorStartLine,
+      })
+    } catch (err) {
+      toast({
+        title: 'Failed to open editor',
+        description: err instanceof Error ? err.message : String(err),
+        status: 'error',
+        duration: 4000,
+      })
+    } finally {
+      setOpeningEditor(false)
+    }
+  }
+
   const getLanguageExtension = () => {
     const extensions = [customCodeTheme]
     const effectiveLanguage = element?.language || detectLanguage(basePath)
@@ -333,6 +373,40 @@ export default function CodePreviewPanel({ isOpen, onClose, element, hasBackdrop
               </Button>
             </Tooltip>
           )}
+          {basePath && (
+            <Tooltip label={`Open in ${sourceEditor === 'zed' ? 'Zed' : 'VS Code'}`} placement="bottom">
+              <Button
+                aria-label={`Open in ${sourceEditor === 'zed' ? 'Zed' : 'VS Code'}`}
+                leftIcon={<ExternalLinkIcon w="12px" h="12px" />}
+                size="xs"
+                variant="outline"
+                color="whiteAlpha.700"
+                borderColor="whiteAlpha.200"
+                h="24px"
+                px={2.5}
+                fontSize="11px"
+                fontWeight="600"
+                bg="whiteAlpha.50"
+                isLoading={openingEditor}
+                onClick={handleOpenInEditor}
+                _hover={{
+                  color: 'white',
+                  bg: 'whiteAlpha.100',
+                  borderColor: 'whiteAlpha.400',
+                  textDecoration: 'none',
+                  transform: 'translateY(-0.5px)',
+                  boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
+                }}
+                _active={{
+                  bg: 'whiteAlpha.200',
+                  transform: 'translateY(0)',
+                }}
+                transition="all 0.1s"
+              >
+                Open in Editor
+              </Button>
+            </Tooltip>
+          )}
           <CloseButton size="sm" color="whiteAlpha.500"
             _hover={{ color: 'white', bg: 'whiteAlpha.100' }}
             onClick={onClose} />

package/src/components/ConnectorPanel.tsx

@@ -1,6 +1,7 @@
 import { memo, useEffect, useRef, useState, useCallback } from 'react'
 import type { ConnectorPanelSlots } from '../slots'
 import {
+  Badge,
   Box,
   Button,
   Divider,
@@ -68,6 +69,10 @@ export interface ConnectorPanelProps extends ConnectorPanelSlots {
   onSave: (connector: Connector) => void
   autoSave?: boolean
   onDelete: (edgeId: number) => void
+  visibilityOverrideDelta?: number
+  onPromoteVisibility?: (id: number) => Promise<void> | void
+  onDemoteVisibility?: (id: number) => Promise<void> | void
+  onResetVisibility?: (id: number) => Promise<void> | void
   hasBackdrop?: boolean
 }
 
@@ -77,7 +82,7 @@ export interface ConnectorPanelProps extends ConnectorPanelSlots {
  * Location: Right side of the screen on desktop. Overlays screen on mobile.
  * Aliases: Connector Properties, Connector Details.
  */
-function ConnectorPanel({ isOpen, onClose, connector, orgId, onSave, autoSave = false, onDelete, hasBackdrop = true, connectorPanelAfterContentSlot }: ConnectorPanelProps) {
+function ConnectorPanel({ isOpen, onClose, connector, orgId, onSave, autoSave = false, onDelete, visibilityOverrideDelta = 0, onPromoteVisibility, onDemoteVisibility, onResetVisibility, hasBackdrop = true, connectorPanelAfterContentSlot }: ConnectorPanelProps) {
   const { canEdit, viewId } = useViewEditorContext()
   const isReadOnly = !canEdit
   const autoSaveEdit = autoSave && !!connector && !isReadOnly
@@ -172,9 +177,9 @@ function ConnectorPanel({ isOpen, onClose, connector, orgId, onSave, autoSave =
     })
   }
 
-  const handleClose = useCallback(() => {
+  const handleClose = useCallback(async () => {
     if (autoSaveEdit) {
-      void saveIfDirtyRef.current?.()
+      await saveIfDirtyRef.current?.()
     }
     onClose()
   }, [autoSaveEdit, onClose])
@@ -350,6 +355,32 @@ function ConnectorPanel({ isOpen, onClose, connector, orgId, onSave, autoSave =
               />
             </FormControl>
 
+            {connector && (onPromoteVisibility || onDemoteVisibility || onResetVisibility) && (
+              <Box borderTop="1px solid" borderColor="whiteAlpha.100" pt={2}>
+                <HStack justify="space-between" mb={2}>
+                  <FormLabel fontSize="xs" fontWeight="bold" color="gray.400" mb={0}>DENSITY</FormLabel>
+                  {visibilityOverrideDelta !== 0 && (
+                    <Badge colorScheme={visibilityOverrideDelta > 0 ? 'teal' : 'orange'} variant="subtle">
+                      {visibilityOverrideDelta > 0 ? `+${visibilityOverrideDelta}` : visibilityOverrideDelta}
+                    </Badge>
+                  )}
+                </HStack>
+                <HStack spacing={2}>
+                  <Button variant="subtle" size="sm" color="teal.200" _hover={{ bg: 'teal.900', color: 'teal.100' }} onClick={() => onPromoteVisibility?.(connector.id)} flex={1} isDisabled={isReadOnly}>
+                    Promote
+                  </Button>
+                  <Button variant="subtle" size="sm" color="orange.200" _hover={{ bg: 'orange.900', color: 'orange.100' }} onClick={() => onDemoteVisibility?.(connector.id)} flex={1} isDisabled={isReadOnly}>
+                    Demote
+                  </Button>
+                  {visibilityOverrideDelta !== 0 && (
+                    <Button variant="ghost" size="sm" onClick={() => onResetVisibility?.(connector.id)} isDisabled={isReadOnly}>
+                      Reset
+                    </Button>
+                  )}
+                </HStack>
+              </Box>
+            )}
+
             {connectorPanelAfterContentSlot}
 
           </VStack>

package/src/components/ContextNeighborElement.tsx

@@ -20,7 +20,7 @@ import {
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, LinkIcon } from '@chakra-ui/icons'
 import type { PlacedElement } from '../types'
 import { TYPE_COLORS } from '../types'
-import { resolveIconPath } from '../utils/url'
+import { resolveElementIconUrl } from '../utils/elementIcon'
 import { ElementBody } from './NodeBody'
 import { ElementContainer } from './NodeContainer'
 
@@ -61,10 +61,7 @@ function ContextNeighborNode({ data }: Props) {
   const color = TYPE_COLORS[data.kind ?? ''] ?? 'gray'
 
   const logoUrl = useMemo(() => {
-    if (data.logo_url) return resolveIconPath(data.logo_url)
-    const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug)
-    if (!selected?.slug) return undefined
-    return resolveIconPath(`/icons/${selected.slug}.png`)
+    return resolveElementIconUrl(data.logo_url, data.technology_connectors) ?? undefined
   }, [data.logo_url, data.technology_connectors])
 
   const primaryOwnerViewId = data.ownerViewIds[0] ?? data.commonAncestorViewId ?? null

package/src/components/CrossBranchControls.tsx

@@ -16,26 +16,29 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react'
-import { CROSS_BRANCH_DEPTH_ALL, CROSS_BRANCH_DEPTH_MAX, CROSS_BRANCH_DEPTH_MIN } from '../crossBranch/types'
-import type { CrossBranchContextSettings } from '../crossBranch/types'
+import {
+  CROSS_BRANCH_CONNECTOR_BUDGET_MAX,
+  CROSS_BRANCH_CONNECTOR_BUDGET_MIN,
+} from '../crossBranch/types'
+import type { CrossBranchConnectorPriority, CrossBranchContextSettings } from '../crossBranch/types'
 
 interface Props {
   settings: CrossBranchContextSettings
   onEnabledChange: (enabled: boolean) => void
-  onDepthChange: (depth: number) => void
+  onBudgetChange: (budget: number) => void
+  onPriorityChange: (priority: CrossBranchConnectorPriority) => void
   label?: string
 }
 
-function depthLabel(depth: number) {
-  return depth >= CROSS_BRANCH_DEPTH_ALL ? 'All' : String(depth)
-}
-
 export default function CrossBranchControls({
   settings,
   onEnabledChange,
-  onDepthChange,
+  onBudgetChange,
+  onPriorityChange,
   label = 'Cross-Branch',
 }: Props) {
+  const connectorBudget = settings.connectorBudget
+
   return (
     <Popover placement="top-start" isLazy>
       <PopoverTrigger>
@@ -50,7 +53,7 @@ export default function CrossBranchControls({
           <HStack spacing={1.5}>
             <Box w="7px" h="7px" rounded="full" bg={settings.enabled ? 'var(--accent)' : 'gray.500'} />
             <Text fontSize="11px" fontWeight="normal">{label}</Text>
-            <Text fontSize="10px" color="gray.400">{settings.enabled ? depthLabel(settings.depth) : 'Off'}</Text>
+            <Text fontSize="10px" color="gray.400">{settings.enabled ? connectorBudget : 'Off'}</Text>
           </HStack>
         </Button>
       </PopoverTrigger>
@@ -71,20 +74,46 @@ export default function CrossBranchControls({
                 <Text fontSize="xs" fontWeight="600" color="white">Show cross-branch context</Text>
                 <Switch isChecked={settings.enabled} onChange={(event) => onEnabledChange(event.target.checked)} colorScheme="blue" />
               </HStack>
+              <Box opacity={settings.enabled ? 1 : 0.4}>
+                <Text fontSize="10px" fontWeight="700" color="gray.400" letterSpacing="0.08em" textTransform="uppercase" mb={2}>
+                  Priority
+                </Text>
+                <HStack spacing={1} bg="whiteAlpha.100" borderRadius="md" p={1}>
+                  {(['external', 'internal'] as const).map((priority) => {
+                    const active = settings.connectorPriority === priority
+                    return (
+                      <Button
+                        key={priority}
+                        size="xs"
+                        h="24px"
+                        flex={1}
+                        isDisabled={!settings.enabled}
+                        variant="ghost"
+                        bg={active ? 'rgba(var(--accent-rgb), 0.18)' : 'transparent'}
+                        color={active ? 'var(--accent)' : 'gray.300'}
+                        _hover={{ bg: active ? 'rgba(var(--accent-rgb), 0.22)' : 'whiteAlpha.100' }}
+                        onClick={() => onPriorityChange(priority)}
+                      >
+                        {priority === 'external' ? 'External' : 'Internal'}
+                      </Button>
+                    )
+                  })}
+                </HStack>
+              </Box>
               <Box opacity={settings.enabled ? 1 : 0.4}>
                 <HStack justify="space-between" mb={2}>
                   <Text fontSize="10px" fontWeight="700" color="gray.400" letterSpacing="0.08em" textTransform="uppercase">
-                    Descendant Depth
+                    Connector Budget
                   </Text>
-                  <Text fontSize="xs" color="gray.300">{depthLabel(settings.depth)}</Text>
+                  <Text fontSize="xs" color="gray.300">{connectorBudget}</Text>
                 </HStack>
                 <Slider
                   isDisabled={!settings.enabled}
-                  min={CROSS_BRANCH_DEPTH_MIN}
-                  max={CROSS_BRANCH_DEPTH_MAX}
+                  min={CROSS_BRANCH_CONNECTOR_BUDGET_MIN}
+                  max={CROSS_BRANCH_CONNECTOR_BUDGET_MAX}
                   step={1}
-                  value={settings.depth}
-                  onChange={onDepthChange}
+                  value={connectorBudget}
+                  onChange={onBudgetChange}
                 >
                   <SliderTrack bg="whiteAlpha.200">
                     <SliderFilledTrack bg="var(--accent)" />
@@ -92,8 +121,8 @@ export default function CrossBranchControls({
                   <SliderThumb boxSize={4} />
                 </Slider>
                 <HStack justify="space-between" mt={1}>
-                  <Text fontSize="10px" color="gray.500">Near</Text>
-                  <Text fontSize="10px" color="gray.500">All</Text>
+                  <Text fontSize="10px" color="gray.500">{CROSS_BRANCH_CONNECTOR_BUDGET_MIN}</Text>
+                  <Text fontSize="10px" color="gray.500">{CROSS_BRANCH_CONNECTOR_BUDGET_MAX}</Text>
                 </HStack>
               </Box>
             </VStack>

package/src/components/ElementNode.tsx

@@ -7,7 +7,7 @@ import { useAccentColor } from '../context/ThemeContext'
 import type { PlacedElement, ViewConnector, Tag } from '../types'
 import { ElementContainer } from './NodeContainer'
 import { ElementBody } from './NodeBody'
-import { resolveIconPath } from '../utils/url'
+import { resolveElementIconUrl } from '../utils/elementIcon'
 import { ZoomInIcon, ZoomOutIcon, TrashIcon as TrashSvg, EditIcon as EditSvg } from './Icons'
 import { vscodeBridge } from '../lib/vscodeBridge'
 import type { ExtensionToWebviewMessage } from '../types/vscode-messages'
@@ -155,6 +155,8 @@ interface NodeData extends PlacedElement {
   selectedHandleIds?: readonly string[]
   reconnectCandidates?: readonly { handleId: string; edgeId: string; endpoint: 'source' | 'target'; selected: boolean }[]
   isConnectorHighlighted?: boolean
+  versionChangeType?: 'added' | 'updated' | 'deleted' | 'initialized'
+  versionLineDelta?: { added: number; removed: number }
 }
 
 interface Props {
@@ -316,13 +318,7 @@ function ElementNode({ data, selected }: Props) {
     return next
   }, [data.reconnectCandidates])
 
-  const derivedPrimaryIconPath = (() => {
-    const selected = data.technology_connectors?.find((link) => link.type === 'catalog' && !!(link.is_primary_icon ?? (link as any).isPrimaryIcon) && !!link.slug)
-    if (!selected?.slug) return undefined
-    return resolveIconPath(`/icons/${selected.slug}.png`)
-  })()
-
-  const nodeLogoUrl = data.logo_url ? resolveIconPath(data.logo_url) : derivedPrimaryIconPath
+  const nodeLogoUrl = resolveElementIconUrl(data.logo_url, data.technology_connectors) ?? undefined
 
   const technologyLinkCount = (data.technology_connectors || []).filter((l) => !!l.label).length
   const technologyParts = (data.technology || '')
@@ -456,6 +452,13 @@ function ElementNode({ data, selected }: Props) {
   const isTarget = !!data.interactionSourceId && !isSource
 
   const bodyCursor = isSource ? 'crosshair' : isTarget ? 'cell' : 'pointer'
+  const versionColor = data.versionChangeType === 'added'
+    ? 'green.300'
+    : data.versionChangeType === 'deleted'
+      ? 'red.300'
+      : data.versionChangeType
+        ? 'yellow.300'
+        : undefined
 
   return (
     <ElementContainer
@@ -463,12 +466,14 @@ function ElementNode({ data, selected }: Props) {
       isSource={isSource}
       isTarget={isTarget}
       isConnectorHighlighted={!!data.isConnectorHighlighted}
+      hasStack={hasChild}
+      kind={data.kind}
       minW="180px"
       maxW="230px"
       cursor={bodyCursor}
-      outline={isDraggedOver ? '2px solid' : undefined}
-      outlineColor={isDraggedOver ? 'var(--accent)' : undefined}
-      outlineOffset={isDraggedOver ? '2px' : undefined}
+      outline={isDraggedOver || versionColor ? '2px solid' : undefined}
+      outlineColor={isDraggedOver ? 'var(--accent)' : versionColor}
+      outlineOffset={isDraggedOver || versionColor ? '2px' : undefined}
       borderTopWidth={data.layerHighlightColor ? '2px' : undefined}
       borderTopColor={data.layerHighlightColor ?? undefined}
       onClick={handleBodyClick}
@@ -483,7 +488,7 @@ function ElementNode({ data, selected }: Props) {
       style={{
         userSelect: 'none',
         WebkitUserSelect: 'none',
-        transition: 'outline 0.15s, outline-color 0.15s',
+        transition: 'outline 0.15s, outline-color 0.15s, opacity 0.15s',
       } as React.CSSProperties}
     >
       {HANDLE_CONFIGS.flatMap(({ side, position }) =>
@@ -702,62 +707,108 @@ function ElementNode({ data, selected }: Props) {
       )}
 
       {/* Code Preview Icon/Link in Bottom Right Corner */}
-      {((data.repo || data.url) && !window.__TLD_VSCODE__) && (
-        <Box
+      {!window.__TLD_VSCODE__ && ((data.repo || data.url) || data.versionLineDelta) && (
+        <HStack
           position="absolute"
           bottom="8px"
           right="8px"
           zIndex={10}
+          spacing={1}
+          align="center"
         >
-          <Tooltip
-            label={
-              data.repo
-                ? `View source: ${data.file_path?.includes('#') ? (() => { try { return JSON.parse(data.file_path.split('#')[1]).name } catch { return 'Link' } })() : 'Link'}${data.url ? ' / URL' : ''}`
-                : 'Open Link'
-            }
-            placement="top"
-            isDisabled={data.isCanvasMoving}
-          >
-            <Box
-              as="button"
-              display="flex"
-              alignItems="center"
-              justifyContent="center"
-              w="18px"
+          {data.versionLineDelta && (
+            <HStack
+              spacing={1}
               h="18px"
+              px={1.5}
               rounded="md"
-              color="whiteAlpha.900"
-              _hover={{ color: 'blue.300', bg: 'whiteAlpha.200', transform: 'scale(1.1)' }}
-              transition="all 0.15s"
-              onClick={(e: React.MouseEvent) => {
-                e.stopPropagation()
-                if (data.repo) {
-                  data.onOpenCodePreview?.(data.element_id)
-                } else if (data.url) {
-                  window.open(data.url, '_blank', 'noopener,noreferrer')
-                }
-              }}
-              onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
+              bg="rgba(var(--bg-main-rgb), 0.86)"
+              border="1px solid"
+              borderColor="whiteAlpha.300"
+              boxShadow="0 4px 12px rgba(0,0,0,0.28)"
+              pointerEvents="none"
             >
-              <LinkIcon w={2.5} h={2.5} />
-            </Box>
-          </Tooltip>
-        </Box>
+              {data.versionLineDelta.added > 0 && (
+                <Text fontSize="9px" fontWeight="800" lineHeight="1" color="green.300">+{data.versionLineDelta.added}</Text>
+              )}
+              {data.versionLineDelta.removed > 0 && (
+                <Text fontSize="9px" fontWeight="800" lineHeight="1" color="red.300">-{data.versionLineDelta.removed}</Text>
+              )}
+            </HStack>
+          )}
+          {(data.repo || data.url) && !window.__TLD_VSCODE__ && (
+            <Tooltip
+              label={
+                data.repo
+                  ? `View source: ${data.file_path?.includes('#') ? (() => { try { return JSON.parse(data.file_path.split('#')[1]).name } catch { return 'Link' } })() : 'Link'}${data.url ? ' / URL' : ''}`
+                  : 'Open Link'
+              }
+              placement="top"
+              isDisabled={data.isCanvasMoving}
+            >
+              <Box
+                as="button"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                w="18px"
+                h="18px"
+                rounded="md"
+                color="whiteAlpha.900"
+                _hover={{ color: 'blue.300', bg: 'whiteAlpha.200', transform: 'scale(1.1)' }}
+                transition="all 0.15s"
+                onClick={(e: React.MouseEvent) => {
+                  e.stopPropagation()
+                  if (data.repo) {
+                    data.onOpenCodePreview?.(data.element_id)
+                  } else if (data.url) {
+                    window.open(data.url, '_blank', 'noopener,noreferrer')
+                  }
+                }}
+                onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
+              >
+                <LinkIcon w={2.5} h={2.5} />
+              </Box>
+            </Tooltip>
+          )}
+        </HStack>
       )}
 
       {/* VSCode specific file link with hover preview */}
       {window.__TLD_VSCODE__ && data.file_path && (
-        <Box
+        <HStack
           position="absolute"
           bottom="8px"
           right="8px"
           zIndex={10}
+          spacing={1}
+          align="center"
         >
+          {data.versionLineDelta && (
+            <HStack
+              spacing={1}
+              h="18px"
+              px={1.5}
+              rounded="md"
+              bg="rgba(var(--bg-main-rgb), 0.86)"
+              border="1px solid"
+              borderColor="whiteAlpha.300"
+              boxShadow="0 4px 12px rgba(0,0,0,0.28)"
+              pointerEvents="none"
+            >
+              {data.versionLineDelta.added > 0 && (
+                <Text fontSize="9px" fontWeight="800" lineHeight="1" color="green.300">+{data.versionLineDelta.added}</Text>
+              )}
+              {data.versionLineDelta.removed > 0 && (
+                <Text fontSize="9px" fontWeight="800" lineHeight="1" color="red.300">-{data.versionLineDelta.removed}</Text>
+              )}
+            </HStack>
+          )}
           <VscodeCodePreview
             filePath={data.file_path}
             isCanvasMoving={data.isCanvasMoving}
           />
-        </Box>
+        </HStack>
       )}
 
       {selected && !isSource && (