diff --git a/src/extension.coffee b/src/extension.coffee
index 77cddf0..61a6fa9 100644
--- a/src/extension.coffee
+++ b/src/extension.coffee
@@ -22,7 +22,7 @@ module.exports.activate = (###* @type vscode.ExtensionContext ### context) =>
 
 	context.subscriptions.push vscode.commands.registerCommand 'git-log--graph.start', =>
 		panel = vscode.window.createWebviewPanel(EXT_NAME, EXT_NAME, vscode.window.activeTextEditor?.viewColumn or 1, { enableScripts: true, retainContextWhenHidden: true, localResourceRoots: [ vscode.Uri.joinPath(context.extensionUri, 'web-dist') ] })
-		panel.iconPath = vscode.Uri.joinPath(context.extensionUri, "logo.png");
+		panel.iconPath = vscode.Uri.joinPath(context.extensionUri, "logo.png")
 		view = panel.webview
 
 		view.onDidReceiveMessage (###* @type MsgRequest ### message) =>
diff --git a/web/src/views/MainView.coffee b/web/src/views/MainView.coffee
index 6f5845d..b1ad05e 100644
--- a/web/src/views/MainView.coffee
+++ b/web/src/views/MainView.coffee
@@ -1,20 +1,22 @@
 import { git, show_error_message, get_config } from '../bridge.coffee'
+# TODO: type errors
 import { parse, Branch, Commit } from './log-utils.coffee'
 import { ref, Ref, computed, watch } from 'vue'
 import GitInputModel, { parse_config_actions, GitAction } from './GitInput.coffee'
 import GitInput from './GitInput.vue'
 import GitActionButton from './GitActionButton.vue'
 import SelectedCommit from './SelectedCommit.vue'
+import Visualization from './Visualization.vue'
 
 export default
-	components: { SelectedCommit, GitInput, GitActionButton }
+	components: { SelectedCommit, GitInput, GitActionButton, Visualization }
 	setup: ->
 		``###* @type {Ref<Branch[]>} ###
 		branches = ref []
 		# this is either a branch name or HEAD in which case it will simply not be shown
 		# which is also not necessary because HEAD is then also visible as a branch tip.
 		head_branch = ref ''
-		vis_style = ref {}
+		vis_max_length = ref 0
 		``###* @type {Ref<Commit | null>} ###
 		selected_commit = ref null
 		``###* @type {Ref<GitInputModel | null>} ###
@@ -30,6 +32,7 @@ export default
 		txt_filter = ref ''
 		``###* @type {Ref<'filter' | 'search'>} ###
 		txt_filter_type = ref 'filter'
+		# TODO: error here somewhere
 		clear_filter = =>
 			txt_filter.value = ''
 			if selected_commit.value
@@ -106,7 +109,7 @@ export default
 					color: '#fff'
 			returned_commits.value = parsed.commits
 			branches.value = parsed.branches
-			vis_style.value = 'min-width': "min(50vw, #{parsed.vis_max_length/2}em)"
+			vis_max_length.value = parsed.vis_max_length
 			if selected_commit.value
 				selected_commit.value = (commits.value.find (commit) =>
 					commit.hash == selected_commit.value?.hash) or null
@@ -114,24 +117,6 @@ export default
 			commits_scroller_ref.value?.scrollToItem scroll_item_offset.value
 			head_branch.value = await git 'rev-parse --abbrev-ref HEAD'
 		
-		mousemove_debouncer = -1
-		hover_branch_debouncer = -1
-		``###* @type {Ref<string | null>} ###
-		hovered_branch_name = ref null
-		document.addEventListener 'mousemove', (e) =>
-			window.clearTimeout mousemove_debouncer
-			mousemove_debouncer = window.setTimeout (=>
-				#@ts-ignore
-				if e.target?.classList.contains('vis-v') #@ts-ignore
-					if branch_name = e.target.dataset.branchName
-						hovered_branch_name.value = branch_name
-						window.clearTimeout hover_branch_debouncer
-						hover_branch_debouncer = window.setTimeout (=>
-							hovered_branch_name.value = null
-						), 300
-			), 100
-
-
 		show_invisible_branches = ref false
 
 		``###* @type {Ref<Commit[]>} ###
@@ -179,12 +164,12 @@ export default
 			branches.value.filter (branch) =>
 				not visible_branches.value.includes branch
 
-		scroll_to_branch_tip = (###* @type Branch ### branch) =>
+		scroll_to_branch_tip = (###* @type string ### branch_name) =>
 			first_branch_commit_i = commits.value.findIndex (commit) =>
 				# Only applicable if virtual branches are excluded as these don't have a tip. Otherwise, each vis would need to be traversed
-				commit.refs.some (ref) => ref.name == branch.name
+				commit.refs.some (ref) => ref.name == branch_name
 			if first_branch_commit_i == -1
-				return show_error_message "No commit found for branch #{branch.name}. No idea why :/"
+				return show_error_message "No commit found for branch #{branch_name}. No idea why :/"
 			commits_scroller_ref.value?.scrollToItem first_branch_commit_i
 			show_invisible_branches.value = false
 			# Not only scroll to tip, but also select it, so the behavior is equal to clicking on
@@ -216,7 +201,7 @@ export default
 		{
 			commits
 			branches
-			vis_style
+			vis_max_length
 			head_branch
 			git_input_ref
 			run_log
@@ -235,7 +220,6 @@ export default
 			txt_filter_type
 			txt_filter_enter
 			clear_filter
-			hovered_branch_name
 			global_actions
 			branch_drop
 			drag_drop_target_branch_name
diff --git a/web/src/views/MainView.vue b/web/src/views/MainView.vue
index d08c22d..68b4889 100644
--- a/web/src/views/MainView.vue
+++ b/web/src/views/MainView.vue
@@ -1,4 +1,4 @@
-1<template lang="slm">
+<template lang="slm">
 #main-view.fill.col
 	details
 		summary Configure...
@@ -9,14 +9,14 @@
 				| No commits found
 			nav.row.align-center.justify-space-between.gap-10
 				ul#branches.row.align-center.wrap.flex-1.gap-3
-					li.ref.branch.visible.active v-for="branch of visible_branches" :class="{is_head:branch.name===head_branch, is_hovered:branch.name===hovered_branch_name}"
-						button :style="{color:branch.color}" @click="scroll_to_branch_tip(branch)" title="Jump to branch tip" v-drag="branch.name" v-drop="branch_drop(branch.name)"
+					li.ref.branch-tip.visible.active v-for="branch of visible_branches" :class="{is_head:branch.name===head_branch}"
+						button :style="{color:branch.color}" @click="scroll_to_branch_tip(branch.name)" title="Jump to branch tip" v-drag="branch.name" v-drop="branch_drop(branch.name)"
 							| {{ branch.name }}
 					li.show-invisible_branches v-if="invisible_branches.length"
 						button @click="show_invisible_branches = ! show_invisible_branches"
 							| Show all >>
 					template v-if="show_invisible_branches"
-						li.ref.branch.invisible v-for="branch of invisible_branches" :class="{is_head:branch.name===head_branch}"
+						li.ref.branch-tip.invisible v-for="branch of invisible_branches" :class="{is_head:branch.name===head_branch}"
 							button :style="{color:branch.color}" @click="scroll_to_branch_tip(branch)" title="Jump to branch tip" v-drag="branch.name" v-drop="branch_drop(branch.name)"
 								| {{ branch.name }}
 						li Click on any of the branch names to jump to the tip of it.
@@ -35,19 +35,14 @@
 					input type="radio" v-model="txt_filter_type" value="search"
 					| Search
 			recycle-scroller#log.scroller.fill-w.flex-1 role="list" :items="commits" v-slot="{ item: commit }" key-field="i" size-field="scroll_height" :buffer="0" :emit-update="true" @update="commits_scroller_updated" ref="commits_scroller_ref" tabindex="-1"
-				.row.commit :class="{active:commit===selected_commit,empty:!commit.hash}"
-					.vis :style="vis_style"
-						span.vis-v v-for="v of commit.vis" :style="v.branch? {color:v.branch.color} : undefined" :class="{is_head:v.branch&&v.branch.name===head_branch}" :data-branch-name="v.branch? v.branch.name : undefined"
-							| {{ v.char }}
-					.info.flex-1.row.gap-20 v-if="commit.hash" @click="commit_clicked(commit)"
+				.row.commit :class="{active:commit===selected_commit,empty:!commit.hash}" @click="commit_clicked(commit)" role="button"
+					visualization.vis :commit="commit" :vis_max_length="vis_max_length" :head_branch="head_branch" @branch_drop="branch_drop($event)"
+					.info.flex-1.row.gap-20 v-if="commit.hash"
 						button
 							.hash.flex-noshrink {{ commit.hash }}
 						.subject-wrapper.flex-1.row.align-center
 							div.vis.vis-v :style="commit.branch? {color:commit.branch.color} : undefined"
 								| ● 
-							.ref v-for="ref of commit.refs" :class="{is_head:ref.name===head_branch,branch:ref.type==='branch'}" v-drag="ref.type==='branch'?ref.name:undefined" v-drop="ref.type==='branch'?branch_drop(ref.name):undefined"
-								span :style="{color:ref.color}"
-									| {{ ref.name }}
 							.subject  {{ commit.subject }}
 						.author.flex-noshrink :title="commit.author_email"
 							| {{ commit.author_name }}
@@ -77,7 +72,7 @@ details
 	&[open]
 		color unset
 		padding 10px
-.ref
+:deep(.ref)
 	background black
 	font-weight bold
 	font-style italic
@@ -86,12 +81,13 @@ details
 	border 1px solid #505050
 	border-radius 7px
 	white-space pre
+	margin 0 1px
 	&.is_head > *:after
 		content ' (HEAD)'
 		color white
 	&.is_hovered
 		outline 3px solid #c54a4a
-	&.branch
+	&.branch-tip
 		&.dragenter
 			background white !important
 			color red !important
@@ -126,8 +122,9 @@ details
 			width 0
 			color grey
 
-	.is_head
+	:deep(.is_head)
 		box-shadow 0px 0px 6px 4px #ffffff30, 0px 0px 4px 0px #ffffff30 inset
+		border 3px solid white
 		border-radius 25px
 
 	#log.scroller
@@ -135,18 +132,25 @@ details
 			// Need tabindex so that pgUp/Down works consistently (idk why, probably vvs bug), but focus outline adds no value here
 			outline none
 		.commit
-			--h 18px // must be synced with JS
+			--h 19px // must be synced with JS
 			&.empty
-				--h 11px // same
+				--h 6px // same
 			height var(--h)
 			line-height var(--h)
+			cursor pointer
 			&.active
 				box-shadow 0 0 3px 0px gold
 			.vis
 				font-weight bold
 				font-family monospace
+			// TODO: wait for vscode to be process.versions.chrome (dev tools) >= 112, then:
+			// .vis:has(+.info:hover)
+			// 	overflow hidden
+			// Workaround until then:
+			.info:hover
+				z-index 1
+				background #202020
 			.info
-				cursor pointer
 				border-top 1px solid #2e2e2e
 				> *
 					white-space pre
@@ -163,7 +167,6 @@ details
 						overflow hidden
 						flex 0 3 auto
 						min-width 55px
-						margin 0 1px
 					> .subject
 						overflow hidden
 						flex 1 1 30%
diff --git a/web/src/views/Visualization.coffee b/web/src/views/Visualization.coffee
new file mode 100644
index 0000000..bc5e5ea
--- /dev/null
+++ b/web/src/views/Visualization.coffee
@@ -0,0 +1,117 @@
+import { computed, defineComponent } from 'vue'
+``###* @typedef {import('./log-utils').Commit} Commit ###
+
+export default defineComponent
+	props:
+		commit:
+			required: true
+			###* @type {() => Commit} ###
+			type: Object
+		vis_max_length:
+			required: true
+			type: Number
+		head_branch:
+			required: true
+			type: String
+	emits: ['branch_drop']
+	setup: (props) ->
+		v_width = 7
+		padding_left = 5
+		padding_right = 20
+		vis_width = props.vis_max_length * v_width + padding_right
+		v_height = computed =>
+			props.commit.scroll_height
+		vis_style = computed =>
+			'min-width': "min(50vw, #{vis_width}px)"
+		lines = computed =>
+			props.commit.vis
+				.map (v, i) =>
+					return null if v.char == ' '
+					coords = switch v.char
+						when '*', '|'
+							x1: padding_left + v_width * (i + 0.5)
+							x2: padding_left + v_width * (i + 0.5)
+							y1: 0
+							y2: v_height.value
+						when '⎺*', '⎺|'
+							x1: padding_left + v_width * i
+							x2: padding_left + v_width * (i + 0.5)
+							y1: 0
+							y2: v_height.value
+						when '*⎺', '|⎺'
+							x1: padding_left + v_width * (i + 1)
+							x2: padding_left + v_width * (i + 0.5)
+							y1: 0
+							y2: v_height.value
+						when '_'
+							x1: padding_left + v_width * i
+							x2: padding_left + v_width * (i + 1)
+							y1: v_height.value
+							y2: v_height.value
+						when '\\'
+							x1: padding_left + v_width * i
+							x2: padding_left + v_width * (i + 1)
+							y1: 0
+							y2: v_height.value
+						when '⎺\\'
+							x1: padding_left + v_width * (i - 0.5)
+							x2: padding_left + v_width * (i + 1)
+							y1: 0
+							y2: v_height.value
+						when '⎺\\⎽'
+							x1: padding_left + v_width * (i - 0.5)
+							x2: padding_left + v_width * (i + 1.5)
+							y1: 0
+							y2: v_height.value
+						when '/'
+							x1: padding_left + v_width * i
+							x2: padding_left + v_width * (i + 1)
+							y1: v_height.value
+							y2: 0
+						when '/⎺'
+							x1: padding_left + v_width * i
+							x2: padding_left + v_width * (i + 1.5)
+							y1: v_height.value
+							y2: 0
+						when '.', '-'
+							x1: padding_left + v_width * i
+							x2: padding_left + v_width * (i + 1)
+							y1: 0
+							y2: 0
+						else
+							throw new Error 'unexpected vis char '+v.char
+					{
+						style:
+							stroke: v.branch?.color
+						class:
+							is_head: v.branch?.name == props.head_branch
+						...coords
+					}
+				.filter Boolean
+		vis_circle_index = computed =>
+			props.commit.vis.findIndex (v) =>
+				['*', '⎺*', '*⎺'].includes v.char
+		circle = computed =>
+			if vis_circle_index.value > -1
+				v = props.commit.vis[vis_circle_index.value]
+				style:
+					stroke: v.branch?.color
+				class:
+					is_head: v.branch?.name == props.head_branch
+				cx: padding_left + v_width * (vis_circle_index.value + 0.5)
+				cy: v_height.value * 0.5
+				r: 4
+		refs_elems = computed =>
+			refs:
+				props.commit.refs.map (ref) =>
+					ref: ref
+					bind:
+						style:
+							color: ref.color
+						class:
+							is_head: ref.name == props.head_branch
+							'branch-tip': ref.type == 'branch'
+			style:
+				left: padding_left + v_width * (vis_circle_index.value + 1) + 3 + 'px'
+
+		{ vis_style, lines, vis_width, circle, refs_elems }
\ No newline at end of file
diff --git a/web/src/views/Visualization.vue b/web/src/views/Visualization.vue
new file mode 100644
index 0000000..1a06a83
--- /dev/null
+++ b/web/src/views/Visualization.vue
@@ -0,0 +1,28 @@
+<template lang="slm">
+.vis :style="vis_style"
+	svg :width="vis_width"
+		line.vis-v v-for="line of lines" v-bind="line"
+		circle.vis-v v-if="circle" v-bind="circle"
+	.refs.row.align-center :style="refs_elems.style"
+		.ref v-for="ref_elem of refs_elems.refs" v-drag="ref_elem.ref.type==='branch'?ref_elem.ref.name:undefined" v-drop="ref_elem.ref.type==='branch'?$emit('branch_drop',ref_elem.ref.name):undefined" v-bind="ref_elem.bind"
+			| {{ ref_elem.ref.name }}
+</template>
+
+<script lang="coffee" src="./Visualization.coffee"></script>
+
+<style lang="stylus" scoped>
+.vis
+	position relative
+	.vis-v
+		stroke-width 2
+	.refs
+		position absolute
+		top 0
+		line-height 1em
+		opacity 85%
+	svg
+		> line.vis-v.is_head
+			filter drop-shadow(4px 0px 1px #ffffffdd) drop-shadow(-4px 0px 1px #ffffffdd)
+		> circle.vis-v.is_head
+			fill white
+</style>
\ No newline at end of file
diff --git a/web/src/views/log-utils.coffee b/web/src/views/log-utils.coffee
index 80b2d5a..3a01ec4 100644
--- a/web/src/views/log-utils.coffee
+++ b/web/src/views/log-utils.coffee
@@ -12,11 +12,13 @@ import colors from "./colors.coffee"
 # }} Branch
 #
 # @typedef {{
+#	char: string
+#	branch: Branch | null
+# }[]} Vis
+#
+# @typedef {{
 #	i: number
-#	vis: {
-#		char: string
-#		branch: Branch | null
-#	}[]
+#	vis: Vis
 #	branch?: Branch
 #	hash: string
 #	author_name: string
@@ -120,7 +122,7 @@ parse = (data, separator) =>
 			i: line_no
 			vis: []
 			hash, author_name, author_email, datetime, refs, subject
-			scroll_height: if hash then 18 else 11 # must be synced with css (v-bind doesn't work with coffee)
+			scroll_height: if hash then 19 else 6 # must be synced with css (v-bind doesn't work with coffee)
 		}
 		for char, i in vis by -1
 			``###* @type {Branch | null | undefined } ###
@@ -134,10 +136,9 @@ parse = (data, separator) =>
 			v_ee = commits[line_no]?.vis[i+2]
 			switch char
 				when '*'
-					char = '●'
 					if branch_tip
 						branch = branch_tip
-						if v_nw?.char == '\\'
+						if ['\\','⎺\\⎽','⎺\\'].includes(v_nw?.char||'')
 							# This is branch tip but in previous above lines, this branch
 							# was already on display for merging without its actual name known (virtual substitute).
 							# Fix these lines (min 1) now
@@ -149,50 +150,64 @@ parse = (data, separator) =>
 									match.branch = branch
 								k--
 							branches.splice branches.indexOf(wrong_branch), 1
+							char = '⎺*'
 					else if v_n?.branch
 						branch = v_n?.branch
-					else if v_nw?.char == '\\'
+					else if ['\\','⎺\\⎽','⎺\\'].includes(v_nw?.char||'')
 						branch = v_nw?.branch
-					else if v_ne?.char == '/'
+						char = '⎺*'
+					else if ['/','/⎺'].includes(v_ne?.char||'')
 						branch = v_ne?.branch
+						char = '*⎺'
 					else
 						branch = new_virtual_branch()
 					commits[line_no].branch = branch if branch
 				when '|'
 					if v_n?.branch
 						branch = v_n?.branch
-					else if v_nw?.char == '\\'
+					else if ['\\','⎺\\⎽','⎺\\'].includes(v_nw?.char||'')
 						branch = v_nw?.branch
-					else if v_ne?.char == '/'
+						char = '⎺|'
+					else if ['/','/⎺'].includes(v_ne?.char||'')
 						branch = v_ne?.branch
+						char = '|⎺'
 					else
 						throw new Error 'no neighbor found for | at line ' + line_no
 				when '_'
 					branch = v_ee?.branch
 				when '/'
-					if v_ne?.char == '●'
+					if ['*','⎺*','*⎺'].includes(v_ne?.char||'')
 						branch = v_ne?.branch
-					else if v_ne?.char == '|'
-						if v_nee?.char == '/' or v_nee?.char == '_'
+						char = '/⎺'
+					else if ['|','⎺|','|⎺'].includes(v_ne?.char||'')
+						if ['/','/⎺'].includes(v_nee?.char||'') or v_nee?.char == '_'
 							branch = v_nee?.branch
 						else
 							branch = v_ne?.branch
-					else if v_ne?.char == '/'
+							char = '/⎺'
+					else if ['/','/⎺'].includes(v_ne?.char||'')
 						branch = v_ne?.branch
-					else if v_n?.char == '\\' or v_n?.char == '|'
+					else if['\\','⎺\\⎽','⎺\\'].includes( v_n?.char||'') or ['|','⎺|','|⎺'].includes(v_n?.char||'')
 						branch = v_n?.branch
+						# TODO:
+						# if ['|','⎺|','|⎺'].includes(v_n?.char||'')
+						#	char = ?
 					else
 						throw new Error 'no neighbor found for / at line ' + line_no
 				when '\\'
-					if v_e?.char == '|'
+					if ['|','⎺|','|⎺'].includes(v_e?.char||'')
 						branch = v_e?.branch
-					else if v_w_char == '|'
+						char = '⎺\\⎽'
+					else if ['|','⎺|','|⎺'].includes(v_w_char)
 						# right before (chronologically) a merge commit (which would be at v_nw).
 						# we can't know the actual branch yet (if it even still exists at all), the last branch
 						# commit is somewhere further down.
 						branch = new_virtual_branch()
-					else if v_nw?.char == '|' or v_nw?.char == '\\'
+						char = '⎺\\'
+					else if ['|','⎺|','|⎺'].includes(v_nw?.char||'') or ['\\','⎺\\⎽','⎺\\'].includes(v_nw?.char||'')
 						branch = v_nw?.branch
+						if ['|','⎺|','|⎺'].includes(v_nw?.char||'')
+							char = '⎺\\'
 					else if v_nw?.char == '.' or v_nw?.char == '-'
 						k = i - 2
 						while (match = commits[line_no-1].vis[k])?.char == '-'
@@ -204,6 +219,8 @@ parse = (data, separator) =>
 						throw new Error 'no neighbor found for \\ at line ' + line_no
 				when ' ', '.', '-'
 					branch = null
+					# TODO:
+					# set char to ⎺-like?
 			if branch == undefined
 				throw new Error 'unexpected undefined branch at line ' + line_no
 			commits[line_no].vis[i] = {