diff --git a/src/extension.coffee b/src/extension.coffee
index ee230c8..14037ef 100644
--- a/src/extension.coffee
+++ b/src/extension.coffee
@@ -1,5 +1,4 @@
-``###* @typedef {{ command: 'response', data?: any, error?: any, id: number }} MsgResponse ###
-``###* @typedef {{ command: string, data: any, id: number }} MsgRequest ###
+``###* @typedef {{ type: 'response' | 'request' | 'push', command?: string, data?: any, error?: any, id: number | string }} BridgeMessage ###
 
 vscode = require 'vscode'
 util = require('util')
@@ -25,36 +24,45 @@ module.exports.activate = (###* @type vscode.ExtensionContext ### context) =>
 		panel.iconPath = vscode.Uri.joinPath(context.extensionUri, "logo.png")
 		view = panel.webview
 
-		view.onDidReceiveMessage (###* @type MsgRequest ### message) =>
+		view.onDidReceiveMessage (###* @type BridgeMessage ### message) =>
 			d = message.data
 			h = (###* @type {() => any} ### func) =>
-				``###* @type MsgResponse ###
+				``###* @type BridgeMessage ###
 				resp =
-					command: 'response'
+					type: 'response'
 					id: message.id
 				try
 					resp.data = await func()
 				catch e
 					resp.error = e
 				view.postMessage resp
-			switch message.command
-				when 'git'
-					h => git d
-				when 'show-error-message'
-					h => vscode.window.showErrorMessage d
-				when 'show-information-message'
-					h => vscode.window.showInformationMessage d
-				when 'get-state'
-					h => context.globalState.get d
-				when 'set-state'
-					h => context.globalState.update d.key, d.value
-				when 'open-diff'
-					h =>
-						uri_1 = vscode.Uri.parse "git-show:#{d.hash}~1:#{d.filename}"
-						uri_2 = vscode.Uri.parse "git-show:#{d.hash}:#{d.filename}"
-						vscode.commands.executeCommand 'vscode.diff', uri_1, uri_2, "#{d.filename} @#{d.hash}"
-				when 'get-config'
-					h => vscode.workspace.getConfiguration(EXT_ID).get d
+			switch message.type
+				when 'request'
+					switch message.command
+						when 'git'
+							h => git d
+						when 'show-error-message'
+							h => vscode.window.showErrorMessage d
+						when 'show-information-message'
+							h => vscode.window.showInformationMessage d
+						when 'get-state'
+							h => context.globalState.get d
+						when 'set-state'
+							h => context.globalState.update d.key, d.value
+						when 'open-diff'
+							h =>
+								uri_1 = vscode.Uri.parse "git-show:#{d.hash}~1:#{d.filename}"
+								uri_2 = vscode.Uri.parse "git-show:#{d.hash}:#{d.filename}"
+								vscode.commands.executeCommand 'vscode.diff', uri_1, uri_2, "#{d.filename} @#{d.hash}"
+						when 'get-config'
+							h => vscode.workspace.getConfiguration(EXT_ID).get d
+		vscode.workspace.onDidChangeConfiguration (event) =>
+			if event.affectsConfiguration EXT_ID
+				``###* @type BridgeMessage ###
+				msg =
+					type: 'push'
+					id: 'config-change'
+				view.postMessage msg
 
 		is_production = context.extensionMode == vscode.ExtensionMode.Production
 		dev_server_url = 'http://localhost:8080'
diff --git a/web/src/App.vue b/web/src/App.vue
index b1f6fde..9c63ed0 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -5,10 +5,15 @@
 
 <script lang="coffee">
 import MainView from './views/MainView.vue'
+import * as store from './views/store.coffee'
+import { add_push_listener } from './bridge.coffee'
 
 export default
 	components: { MainView }	
 	setup: ->
+		store.init()
+		add_push_listener 'config-change', store.refresh_config
+		undefined
 </script>
 
 <style lang="stylus">
diff --git a/web/src/bridge.coffee b/web/src/bridge.coffee
index 1653771..eea12ad 100644
--- a/web/src/bridge.coffee
+++ b/web/src/bridge.coffee
@@ -1,32 +1,34 @@
-``###* @typedef {import('@extension/extension.coffee').MsgResponse} MsgResponse ###
-``###* @typedef {import('@extension/extension.coffee').MsgRequest} MsgRequest ###
+``###* @typedef {import('@extension/extension.coffee').BridgeMessage} BridgeMessage ###
 
 vscode = acquireVsCodeApi()
 
-``###* @type {Record<string, (r: MsgResponse) => void>} ###
-callbacks = {}
+``###* @type {Record<string, (r: BridgeMessage) => void>} ###
+response_handlers = {}
 id = 0
 
+``###* @type {Record<string, (r: BridgeMessage) => void>} ###
+push_handlers = {}
+
 window.addEventListener 'message', (msg_event) =>
-	``###* @type MsgResponse ###
+	``###* @type BridgeMessage ###
 	message = msg_event.data
-	switch message.command
+	switch message.type
 		when 'response'
-			handler = callbacks[message.id]
-			if handler
-				handler message
-				delete callbacks[message.id]
-			else
-				throw new Error "unhandled response id: " + JSON.stringify(message)
+			throw new Error "unhandled message response id: " + JSON.stringify(message) if not response_handlers[message.id]
+			response_handlers[message.id] message
+			delete response_handlers[message.id]
+		when 'push'
+			throw new Error "unhandled message push id: " + JSON.stringify(message) if not push_handlers[message.id]
+			push_handlers[message.id] message
 
 send_message = (###* @type string ### command, ###* @type any ### data) =>
 	id++
-	``###* @type MsgRequest ###
-	request = { command, data, id }
+	``###* @type BridgeMessage ###
+	request = { command, data, id, type: 'request' }
 	vscode.postMessage request
-	``###* @type {MsgResponse} ###
+	``###* @type {BridgeMessage} ###
 	resp = await new Promise (ok) =>
-		callbacks[id] = (data) =>
+		response_handlers[id] = (data) =>
 			ok data
 	if resp.error then throw resp.error
 	resp.data
@@ -45,4 +47,7 @@ export set_state = (###* @type string ### key, ###* @type any ### value) =>
 export open_diff = (###* @type string ### hash, ###* @type string ### filename) =>
 	send_message 'open-diff', { hash, filename }
 export get_config = (###* @type string ### key) =>
-	send_message 'get-config', key
\ No newline at end of file
+	send_message 'get-config', key
+
+export add_push_listener = (###* @type string ### id, ###* @type {(r: BridgeMessage) => void} ### handler) =>
+	push_handlers[id] = handler
\ No newline at end of file
diff --git a/web/src/views/MainView.coffee b/web/src/views/MainView.coffee
index d841bea..c86811b 100644
--- a/web/src/views/MainView.coffee
+++ b/web/src/views/MainView.coffee
@@ -201,7 +201,6 @@ export default
 				}
 			}
 		invisible_branch_tips_of_visible_branches_elems = computed =>
-			v_width = 10 # TODO sync
 			row = -1
 			connection_fake_commit.value?.vis
 				.map (v, i) =>
@@ -211,7 +210,7 @@ export default
 					branch: v.branch
 					bind:
 						style:
-							left: 0 + v_width * i + 'px'
+							left: 0 + store.vis_v_width.value * i + 'px'
 							top: 0 + row * 19 + 'px'
 				.filter(is_truthy)
 
diff --git a/web/src/views/Visualization.coffee b/web/src/views/Visualization.coffee
index 7489c9e..6f0d74e 100644
--- a/web/src/views/Visualization.coffee
+++ b/web/src/views/Visualization.coffee
@@ -1,5 +1,5 @@
 import { computed, defineComponent } from 'vue'
-import { vis_max_length, head_branch } from './store.coffee'
+import { vis_max_length, head_branch, vis_v_width } from './store.coffee'
 import RefTip from './RefTip.vue'
 ``###* @typedef {import('./log-utils').Commit} Commit ###
 
@@ -12,10 +12,9 @@ export default defineComponent
 	emits: ['branch_drop']
 	components: { RefTip }
 	setup: (props) ->
-		v_width = 10
 		padding_left = 5
 		padding_right = 20
-		vis_width = vis_max_length.value * v_width + padding_right
+		vis_width = vis_max_length.value * vis_v_width.value + padding_right
 		v_height = computed =>
 			props.commit.scroll_height
 		vis_style = computed =>
@@ -27,73 +26,73 @@ export default defineComponent
 					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)
+							x1: padding_left + vis_v_width.value * (i + 0.5)
+							x2: padding_left + vis_v_width.value * (i + 0.5)
 							y1: 0
 							y2: v_height.value
 						when '⎺*', '⎺|'
-							x1: padding_left + v_width * i
-							x2: padding_left + v_width * (i + 0.5)
+							x1: padding_left + vis_v_width.value * i
+							x2: padding_left + vis_v_width.value * (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)
+							x1: padding_left + vis_v_width.value * (i + 1)
+							x2: padding_left + vis_v_width.value * (i + 0.5)
 							y1: 0
 							y2: v_height.value
 						when '⎽*', '⎽|'
-							x1: padding_left + v_width * (i + 0.5)
-							x2: padding_left + v_width * i
+							x1: padding_left + vis_v_width.value * (i + 0.5)
+							x2: padding_left + vis_v_width.value * i
 							y1: 0
 							y2: v_height.value
 						when '⎽⎽|'
-							x1: padding_left + v_width * (i - 0.5)
-							x2: padding_left + v_width * (i + 0.5)
+							x1: padding_left + vis_v_width.value * (i - 0.5)
+							x2: padding_left + vis_v_width.value * (i + 0.5)
 							y1: v_height.value
 							y2: 0
 						when '*⎽', '|⎽'
-							x1: padding_left + v_width * (i + 0.5)
-							x2: padding_left + v_width * (i + 1)
+							x1: padding_left + vis_v_width.value * (i + 0.5)
+							x2: padding_left + vis_v_width.value * (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)
+							x1: padding_left + vis_v_width.value * (i + 0.5)
+							x2: padding_left + vis_v_width.value * (i + 1.5)
 							y1: 0
 							y2: v_height.value
 						when '_'
-							x1: padding_left + v_width * i
-							x2: padding_left + v_width * (i + 1)
+							x1: padding_left + vis_v_width.value * i
+							x2: padding_left + vis_v_width.value * (i + 1)
 							y1: v_height.value
 							y2: v_height.value
 						when '\\'
-							x1: padding_left + v_width * i
-							x2: padding_left + v_width * (i + 1)
+							x1: padding_left + vis_v_width.value * i
+							x2: padding_left + vis_v_width.value * (i + 1)
 							y1: 0
 							y2: v_height.value
 						when '⎺\\'
-							x1: padding_left + v_width * (i - 0.5)
-							x2: padding_left + v_width * (i + 1)
+							x1: padding_left + vis_v_width.value * (i - 0.5)
+							x2: padding_left + vis_v_width.value * (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)
+							x1: padding_left + vis_v_width.value * (i - 0.5)
+							x2: padding_left + vis_v_width.value * (i + 1.5)
 							y1: 0
 							y2: v_height.value
 						when '/'
-							x1: padding_left + v_width * (i + 1)
-							x2: padding_left + v_width * i
+							x1: padding_left + vis_v_width.value * (i + 1)
+							x2: padding_left + vis_v_width.value * i
 							y1: 0
 							y2: v_height.value
 						when '/⎺'
-							x1: padding_left + v_width * (i + 1.5)
-							x2: padding_left + v_width * i
+							x1: padding_left + vis_v_width.value * (i + 1.5)
+							x2: padding_left + vis_v_width.value * i
 							y1: 0
 							y2: v_height.value
 						when '.', '-'
-							x1: padding_left + v_width * i
-							x2: padding_left + v_width * (i + 1)
+							x1: padding_left + vis_v_width.value * i
+							x2: padding_left + vis_v_width.value * (i + 1)
 							y1: 0
 							y2: 0
 						else
@@ -116,12 +115,12 @@ export default defineComponent
 					stroke: v.branch?.color
 				class:
 					is_head: v.branch?.name == head_branch.value
-				cx: padding_left + v_width * (vis_circle_index.value + 0.5)
+				cx: padding_left + vis_v_width.value * (vis_circle_index.value + 0.5)
 				cy: v_height.value * 0.5
 				r: 4
 		refs_elems = computed =>
 			refs: props.commit.refs
 			style:
-				left: padding_left + v_width * (vis_circle_index.value + 1) + 3 + 'px'
+				left: padding_left + vis_v_width.value * (vis_circle_index.value + 1) + 3 + 'px'
 
 		{ vis_style, lines, vis_width, circle, refs_elems, v_height }
\ No newline at end of file
diff --git a/web/src/views/store.coffee b/web/src/views/store.coffee
index edb6fb6..3fb996c 100644
--- a/web/src/views/store.coffee
+++ b/web/src/views/store.coffee
@@ -50,6 +50,7 @@ export git_run_log = (###* @type string ### log_args) =>
 			color: '#fff'
 	commits.value = parsed.commits
 	branches.value = parsed.branches
+	# todo rename to vis_max_amount
 	vis_max_length.value = parsed.vis_max_length
 	head_branch.value = await git 'rev-parse --abbrev-ref HEAD'
 
@@ -81,15 +82,8 @@ export branch_actions = ref []
 export commit_actions = ref []
 ``###* @type {Ref<ConfigGitAction[]>} ###
 export stash_actions = ref []
-do =>
-	global_actions.value = await get_config 'actions.global'
-	branch_actions.value = await get_config 'actions.branch'
-	commit_actions.value = await get_config 'actions.commit'
-	stash_actions.value = await get_config 'actions.stash'
 ``###* @type {Ref<ConfigGitAction[]>} ###
 _unparsed_combine_branches_actions = ref []
-do =>
-	_unparsed_combine_branches_actions.value = await get_config 'actions.branch-drop'
 export combine_branches_actions = computed =>
 	parse_config_actions(_unparsed_combine_branches_actions.value, [
 		['{SOURCE_BRANCH_NAME}', combine_branches_from_branch_name.value],
@@ -103,4 +97,25 @@ export combine_branches = (###* @type string ### from_branch_name, ###* @type st
 	combine_branches_from_branch_name.value = from_branch_name
 
 ``###* @type {Ref<Commit|null>} ###
-export selected_commit = ref null
\ No newline at end of file
+export selected_commit = ref null
+
+``###* @type {Ref<number|string>} ###
+export config_width = ref ''
+
+export init = =>
+	refresh_config()
+export refresh_config = =>
+	global_actions.value = await get_config 'actions.global'
+	branch_actions.value = await get_config 'actions.branch'
+	commit_actions.value = await get_config 'actions.commit'
+	stash_actions.value = await get_config 'actions.stash'
+	
+	_unparsed_combine_branches_actions.value = await get_config 'actions.branch-drop'
+
+	config_width.value = await get_config 'branch-width'
+
+export vis_v_width = computed =>
+	if not config_width.value or not Number(config_width.value)
+		Math.max(2, Math.min(10, Math.round(vis_max_length.value * (-1) * 8 / 50 + 18)))
+	else
+		Number(config_width.value)
\ No newline at end of file