Branch-grouped navigation for timeline node manager

Replace flat dropdown with branch selector showing node counts,
scrollable node list with HEAD/tip badges, and inline actions panel.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

main.py

@@ -20,72 +20,136 @@ from tab_comfy_ng import render_comfy_monitor
 def index():
     # -- Streamlit dark theme --
     ui.dark_mode(True)
-    ui.colors(primary='#FF4B4B')
+    ui.colors(primary='#F59E0B')
+    ui.add_head_html(
+        '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">'
+    )
     ui.add_css('''
-        /* === Streamlit Dark Theme === */
+        /* === Dark Theme with Depth Palette === */
+        :root {
+            --bg-page:      #0B0E14;
+            --bg-surface-1: #13161E;
+            --bg-surface-2: #1A1E2A;
+            --bg-surface-3: #242836;
+            --border:        rgba(255,255,255,0.08);
+            --text-primary:  #EAECF0;
+            --text-secondary: rgba(234,236,240,0.55);
+            --accent:        #F59E0B;
+            --accent-subtle: rgba(245,158,11,0.12);
+            --negative:      #EF4444;
+        }
 
         /* Backgrounds */
         body.body--dark,
         .q-page.body--dark,
-        .body--dark .q-page { background: #0E1117 !important; }
-        .body--dark .q-drawer { background: #262730 !important; }
-        .body--dark .q-card { background: #262730 !important; border-radius: 0.5rem; }
+        .body--dark .q-page { background: var(--bg-page) !important; }
+        .body--dark .q-drawer { background: var(--bg-surface-1) !important; }
+        .body--dark .q-card {
+            background: var(--bg-surface-2) !important;
+            border: 1px solid var(--border);
+            border-radius: 0.75rem;
+        }
         .body--dark .q-tab-panels { background: transparent !important; }
         .body--dark .q-tab-panel { background: transparent !important; }
         .body--dark .q-expansion-item { background: transparent !important; }
 
         /* Text */
-        .body--dark { color: #FAFAFA !important; }
-        .body--dark .q-field__label { color: rgba(250,250,250,0.6) !important; }
-        .body--dark .text-caption { color: rgba(250,250,250,0.6) !important; }
+        .body--dark { color: var(--text-primary) !important; }
+        .body--dark .q-field__label { color: var(--text-secondary) !important; }
+        .body--dark .text-caption { color: var(--text-secondary) !important; }
         .body--dark .text-subtitle1,
-        .body--dark .text-subtitle2 { color: #FAFAFA !important; }
+        .body--dark .text-subtitle2 { color: var(--text-primary) !important; }
 
         /* Inputs & textareas */
         .body--dark .q-field--outlined .q-field__control {
-            background: #262730 !important;
+            background: var(--bg-surface-3) !important;
             border-radius: 0.5rem !important;
         }
         .body--dark .q-field--outlined .q-field__control:before {
-            border-color: rgba(250,250,250,0.2) !important;
+            border-color: var(--border) !important;
             border-radius: 0.5rem !important;
         }
         .body--dark .q-field--outlined.q-field--focused .q-field__control:after {
-            border-color: #FF4B4B !important;
+            border-color: var(--accent) !important;
         }
         .body--dark .q-field__native,
-        .body--dark .q-field__input { color: #FAFAFA !important; }
+        .body--dark .q-field__input { color: var(--text-primary) !important; }
 
-        /* Sidebar inputs get main bg */
+        /* Sidebar inputs get page bg */
         .body--dark .q-drawer .q-field--outlined .q-field__control {
-            background: #0E1117 !important;
+            background: var(--bg-page) !important;
         }
 
         /* Buttons */
         .body--dark .q-btn--standard { border-radius: 0.5rem !important; }
+        .body--dark .q-btn--outline {
+            transition: background 0.15s ease;
+        }
+        .body--dark .q-btn--outline:hover {
+            background: var(--accent-subtle) !important;
+        }
 
         /* Tabs */
-        .body--dark .q-tab--active { color: #FF4B4B !important; }
-        .body--dark .q-tab__indicator { background: #FF4B4B !important; }
+        .body--dark .q-tab--active { color: var(--accent) !important; }
+        .body--dark .q-tab__indicator { background: var(--accent) !important; }
 
         /* Separators */
-        .body--dark .q-separator { background: rgba(250,250,250,0.2) !important; }
+        .body--dark .q-separator { background: var(--border) !important; }
 
         /* Expansion items */
-        .body--dark .q-expansion-item__content { padding: 4px 0; }
+        .body--dark .q-expansion-item__content { padding: 12px 16px; }
         .body--dark .q-item { border-radius: 0.5rem; }
 
         /* Splitter */
-        .body--dark .q-splitter__separator { background: rgba(250,250,250,0.2) !important; }
+        .body--dark .q-splitter__separator { background: var(--border) !important; }
+        .body--dark .q-splitter__before,
+        .body--dark .q-splitter__after { padding: 0 8px; }
 
         /* Action row wrap */
-        .action-row { flex-wrap: wrap !important; gap: 4px !important; }
+        .action-row { flex-wrap: wrap !important; gap: 8px !important; }
 
         /* Notifications */
         .body--dark .q-notification { border-radius: 0.5rem; }
 
         /* Font */
-        body { font-family: "Source Sans Pro", "Source Sans 3", sans-serif !important; }
+        body { font-family: "Inter", "Source Sans Pro", "Source Sans 3", sans-serif !important; }
+
+        /* Surface utility classes (need .body--dark to beat .body--dark .q-card specificity) */
+        .body--dark .surface-1 { background: var(--bg-surface-1) !important; }
+        .body--dark .surface-2 { background: var(--bg-surface-2) !important; }
+        .body--dark .surface-3 { background: var(--bg-surface-3) !important; }
+
+        /* Typography utility classes */
+        .section-header {
+            font-size: 0.8rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-secondary) !important;
+        }
+        .subsection-header {
+            font-size: 0.85rem;
+            font-weight: 500;
+            color: var(--text-primary) !important;
+        }
+
+        /* Scrollbar */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.12);
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.2);
+        }
+
+        /* Secondary pane teal accent */
+        .pane-secondary .q-field--outlined.q-field--focused .q-field__control:after {
+            border-color: #06B6D4 !important;
+        }
+        .pane-secondary .q-btn.bg-primary { background-color: #06B6D4 !important; }
+        .pane-secondary .section-header { color: rgba(6,182,212,0.7) !important; }
     ''')
 
     config = load_config()
@@ -94,6 +158,7 @@ def index():
         current_dir=Path(config.get('last_dir', str(Path.cwd()))),
         snippets=load_snippets(),
     )
+    dual_pane = {'active': False, 'state': None}
 
     # ------------------------------------------------------------------
     # Define helpers FIRST (before sidebar, which needs them)
@@ -101,30 +166,92 @@ def index():
 
     @ui.refreshable
     def render_main_content():
-        if not state.file_path or not state.file_path.exists():
-            ui.label('Select a file from the sidebar to begin.').classes(
-                'text-subtitle1 q-pa-lg')
+        max_w = '2400px' if dual_pane['active'] else '1200px'
+        with ui.column().classes('w-full q-pa-md').style(f'max-width: {max_w}; margin: 0 auto'):
+            if not state.file_path or not state.file_path.exists():
+                ui.label('Select a file from the sidebar to begin.').classes(
+                    'text-subtitle1 q-pa-lg')
+                return
+
+            ui.label(f'Editing: {state.file_path.name}').classes('text-h5 q-mb-lg').style('font-weight: 600')
+
+            with ui.tabs().classes('w-full').style('border-bottom: 1px solid var(--border)') as tabs:
+                ui.tab('batch', label='Batch Processor')
+                ui.tab('timeline', label='Timeline')
+                ui.tab('raw', label='Raw Editor')
+
+            with ui.tab_panels(tabs, value='batch').classes('w-full'):
+                with ui.tab_panel('batch'):
+                    _render_batch_tab_content()
+                with ui.tab_panel('timeline'):
+                    render_timeline_tab(state)
+                with ui.tab_panel('raw'):
+                    render_raw_editor(state)
+
+            if state.show_comfy_monitor:
+                ui.separator()
+                with ui.expansion('ComfyUI Monitor', icon='dns').classes('w-full'):
+                    render_comfy_monitor(state)
+
+    @ui.refreshable
+    def _render_batch_tab_content():
+        def on_toggle(e):
+            dual_pane['active'] = e.value
+            if e.value and dual_pane['state'] is None:
+                s2 = state.create_secondary()
+                s2._render_main = _render_batch_tab_content
+                dual_pane['state'] = s2
+            render_main_content.refresh()
+
+        ui.switch('Dual Pane', value=dual_pane['active'], on_change=on_toggle)
+
+        if not dual_pane['active']:
+            render_batch_processor(state)
+        else:
+            s2 = dual_pane['state']
+            with ui.row().classes('w-full gap-4'):
+                with ui.column().classes('col'):
+                    ui.label('Pane A').classes('section-header q-mb-sm')
+                    _render_pane_file_selector(state)
+                    render_batch_processor(state)
+                with ui.column().classes('col pane-secondary'):
+                    ui.label('Pane B').classes('section-header q-mb-sm')
+                    _render_pane_file_selector(s2)
+                    if s2.file_path and s2.file_path.exists():
+                        render_batch_processor(s2)
+                    else:
+                        ui.label('Select a file above to begin.').classes(
+                            'text-caption q-pa-md')
+
+    def _render_pane_file_selector(pane_state: AppState):
+        if not pane_state.current_dir.exists():
+            ui.label('Directory not found.').classes('text-warning')
             return
+        json_files = sorted(pane_state.current_dir.glob('*.json'))
+        json_files = [f for f in json_files if f.name not in (
+            '.editor_config.json', '.editor_snippets.json')]
+        file_names = [f.name for f in json_files]
 
-        ui.label(f'Editing: {state.file_path.name}').classes('text-h5 q-mb-md')
+        current_val = pane_state.file_path.name if pane_state.file_path else None
 
-        with ui.tabs().classes('w-full') as tabs:
-            ui.tab('batch', label='Batch Processor')
-            ui.tab('timeline', label='Timeline')
-            ui.tab('raw', label='Raw Editor')
+        def on_select(e):
+            if not e.value:
+                return
+            fp = pane_state.current_dir / e.value
+            data, mtime = load_json(fp)
+            pane_state.data_cache = data
+            pane_state.last_mtime = mtime
+            pane_state.loaded_file = str(fp)
+            pane_state.file_path = fp
+            pane_state.restored_indicator = None
+            _render_batch_tab_content.refresh()
 
-        with ui.tab_panels(tabs, value='batch').classes('w-full'):
-            with ui.tab_panel('batch'):
-                render_batch_processor(state)
-            with ui.tab_panel('timeline'):
-                render_timeline_tab(state)
-            with ui.tab_panel('raw'):
-                render_raw_editor(state)
-
-        if state.show_comfy_monitor:
-            ui.separator()
-            with ui.expansion('ComfyUI Monitor', icon='dns').classes('w-full'):
-                render_comfy_monitor(state)
+        ui.select(
+            file_names,
+            value=current_val,
+            label='File',
+            on_change=on_select,
+        ).classes('w-full')
 
     def load_file(file_name: str):
         """Load a JSON file and refresh the main content."""
@@ -148,8 +275,8 @@ def index():
     # ------------------------------------------------------------------
     # Sidebar (rendered AFTER helpers are attached)
     # ------------------------------------------------------------------
-    with ui.left_drawer(value=True).classes('q-pa-md').style('width: 300px'):
-        render_sidebar(state)
+    with ui.left_drawer(value=True).classes('q-pa-md').style('width: 320px'):
+        render_sidebar(state, dual_pane)
 
     # ------------------------------------------------------------------
     # Main content area
@@ -162,175 +289,190 @@ def index():
 # Sidebar
 # ======================================================================
 
-def render_sidebar(state: AppState):
+def render_sidebar(state: AppState, dual_pane: dict):
     ui.label('Navigator').classes('text-h6')
 
-    # --- Path input ---
-    path_input = ui.input(
-        'Current Path',
-        value=str(state.current_dir),
-    ).classes('w-full')
+    # --- Path input + Pin ---
+    with ui.card().classes('w-full q-pa-md q-mb-md'):
+        path_input = ui.input(
+            'Current Path',
+            value=str(state.current_dir),
+        ).classes('w-full')
 
-    def on_path_enter():
-        p = resolve_path_case_insensitive(path_input.value)
-        if p is not None and p.is_dir():
-            state.current_dir = p
-            state.config['last_dir'] = str(p)
+        def on_path_enter():
+            p = resolve_path_case_insensitive(path_input.value)
+            if p is not None and p.is_dir():
+                state.current_dir = p
+                if dual_pane['state']:
+                    dual_pane['state'].current_dir = state.current_dir
+                    dual_pane['state'].file_path = None
+                    dual_pane['state'].loaded_file = None
+                    dual_pane['state'].data_cache = {}
+                state.config['last_dir'] = str(p)
+                save_config(state.current_dir, state.config['favorites'], state.config)
+                state.loaded_file = None
+                state.file_path = None
+                path_input.set_value(str(p))
+                render_file_list.refresh()
+                # Auto-load inside render_file_list already refreshed main content
+                # if files exist; only refresh here for the empty-directory case.
+                if not state.loaded_file:
+                    state._render_main.refresh()
+
+        path_input.on('keydown.enter', lambda _: on_path_enter())
+
+        def pin_folder():
+            d = str(state.current_dir)
+            if d not in state.config['favorites']:
+                state.config['favorites'].append(d)
+                save_config(state.current_dir, state.config['favorites'], state.config)
+                render_favorites.refresh()
+
+        ui.button('Pin Folder', icon='push_pin', on_click=pin_folder).classes('w-full')
+
+    # --- Favorites ---
+    with ui.card().classes('w-full q-pa-md q-mb-md'):
+        ui.label('Favorites').classes('section-header')
+
+        @ui.refreshable
+        def render_favorites():
+            for fav in list(state.config['favorites']):
+                with ui.row().classes('w-full items-center'):
+                    ui.button(
+                        fav,
+                        on_click=lambda f=fav: _jump_to(f),
+                    ).props('flat dense').classes('col')
+                    ui.button(
+                        icon='close',
+                        on_click=lambda f=fav: _unpin(f),
+                    ).props('flat dense color=negative')
+
+        def _jump_to(fav: str):
+            state.current_dir = Path(fav)
+            if dual_pane['state']:
+                dual_pane['state'].current_dir = state.current_dir
+                dual_pane['state'].file_path = None
+                dual_pane['state'].loaded_file = None
+                dual_pane['state'].data_cache = {}
+            state.config['last_dir'] = fav
             save_config(state.current_dir, state.config['favorites'], state.config)
             state.loaded_file = None
             state.file_path = None
-            path_input.set_value(str(p))
+            path_input.set_value(fav)
             render_file_list.refresh()
-            # Auto-load inside render_file_list already refreshed main content
-            # if files exist; only refresh here for the empty-directory case.
             if not state.loaded_file:
                 state._render_main.refresh()
 
-    path_input.on('keydown.enter', lambda _: on_path_enter())
+        def _unpin(fav: str):
+            if fav in state.config['favorites']:
+                state.config['favorites'].remove(fav)
+                save_config(state.current_dir, state.config['favorites'], state.config)
+                render_favorites.refresh()
 
-    # --- Pin / Unpin ---
-    def pin_folder():
-        d = str(state.current_dir)
-        if d not in state.config['favorites']:
-            state.config['favorites'].append(d)
-            save_config(state.current_dir, state.config['favorites'], state.config)
-            render_favorites.refresh()
-
-    ui.button('Pin Folder', icon='push_pin', on_click=pin_folder).classes('w-full')
-
-    @ui.refreshable
-    def render_favorites():
-        for fav in list(state.config['favorites']):
-            with ui.row().classes('w-full items-center'):
-                ui.button(
-                    fav,
-                    on_click=lambda f=fav: _jump_to(f),
-                ).props('flat dense').classes('col')
-                ui.button(
-                    icon='close',
-                    on_click=lambda f=fav: _unpin(f),
-                ).props('flat dense color=negative')
-
-    def _jump_to(fav: str):
-        state.current_dir = Path(fav)
-        state.config['last_dir'] = fav
-        save_config(state.current_dir, state.config['favorites'], state.config)
-        state.loaded_file = None
-        state.file_path = None
-        path_input.set_value(fav)
-        render_file_list.refresh()
-        if not state.loaded_file:
-            state._render_main.refresh()
-
-    def _unpin(fav: str):
-        if fav in state.config['favorites']:
-            state.config['favorites'].remove(fav)
-            save_config(state.current_dir, state.config['favorites'], state.config)
-            render_favorites.refresh()
-
-    render_favorites()
-
-    ui.separator()
+        render_favorites()
 
     # --- Snippet Library ---
-    ui.label('Snippet Library').classes('text-subtitle1 q-mt-md')
+    with ui.card().classes('w-full q-pa-md q-mb-md'):
+        ui.label('Snippet Library').classes('section-header')
 
-    with ui.expansion('Add New Snippet'):
-        snip_name_input = ui.input('Name', placeholder='e.g. Cinematic').classes('w-full')
-        snip_content_input = ui.textarea('Content', placeholder='4k, high quality...').classes('w-full')
+        with ui.expansion('Add New Snippet'):
+            snip_name_input = ui.input('Name', placeholder='e.g. Cinematic').classes('w-full')
+            snip_content_input = ui.textarea('Content', placeholder='4k, high quality...').classes('w-full')
 
-        def save_snippet():
-            name = snip_name_input.value
-            content = snip_content_input.value
-            if name and content:
-                state.snippets[name] = content
+            def save_snippet():
+                name = snip_name_input.value
+                content = snip_content_input.value
+                if name and content:
+                    state.snippets[name] = content
+                    save_snippets(state.snippets)
+                    snip_name_input.set_value('')
+                    snip_content_input.set_value('')
+                    ui.notify(f"Saved '{name}'")
+                    render_snippet_list.refresh()
+
+            ui.button('Save Snippet', on_click=save_snippet).classes('w-full')
+
+        @ui.refreshable
+        def render_snippet_list():
+            if not state.snippets:
+                return
+            ui.label('Click to copy snippet text:').classes('text-caption')
+            for name, content in list(state.snippets.items()):
+                with ui.row().classes('w-full items-center'):
+                    async def copy_snippet(c=content):
+                        await ui.run_javascript(
+                            f'navigator.clipboard.writeText({json.dumps(c)})', timeout=3.0)
+                        ui.notify('Copied to clipboard')
+
+                    ui.button(
+                        f'{name}',
+                        on_click=copy_snippet,
+                    ).props('flat dense').classes('col')
+                    ui.button(
+                        icon='delete',
+                        on_click=lambda n=name: _del_snippet(n),
+                    ).props('flat dense color=negative')
+
+        def _del_snippet(name: str):
+            if name in state.snippets:
+                del state.snippets[name]
                 save_snippets(state.snippets)
-                snip_name_input.set_value('')
-                snip_content_input.set_value('')
-                ui.notify(f"Saved '{name}'")
                 render_snippet_list.refresh()
 
-        ui.button('Save Snippet', on_click=save_snippet).classes('w-full')
-
-    @ui.refreshable
-    def render_snippet_list():
-        if not state.snippets:
-            return
-        ui.label('Click to copy snippet text:').classes('text-caption')
-        for name, content in list(state.snippets.items()):
-            with ui.row().classes('w-full items-center'):
-                async def copy_snippet(c=content):
-                    await ui.run_javascript(
-                        f'navigator.clipboard.writeText({json.dumps(c)})', timeout=3.0)
-                    ui.notify('Copied to clipboard')
-
-                ui.button(
-                    f'{name}',
-                    on_click=copy_snippet,
-                ).props('flat dense').classes('col')
-                ui.button(
-                    icon='delete',
-                    on_click=lambda n=name: _del_snippet(n),
-                ).props('flat dense color=negative')
-
-    def _del_snippet(name: str):
-        if name in state.snippets:
-            del state.snippets[name]
-            save_snippets(state.snippets)
-            render_snippet_list.refresh()
-
-    render_snippet_list()
-
-    ui.separator()
+        render_snippet_list()
 
     # --- File List ---
-    @ui.refreshable
-    def render_file_list():
-        json_files = sorted(state.current_dir.glob('*.json'))
-        json_files = [f for f in json_files if f.name not in ('.editor_config.json', '.editor_snippets.json')]
+    with ui.card().classes('w-full q-pa-md q-mb-md'):
+        @ui.refreshable
+        def render_file_list():
+            if not state.current_dir.exists():
+                ui.label('Directory not found.').classes('text-warning')
+                return
+            json_files = sorted(state.current_dir.glob('*.json'))
+            json_files = [f for f in json_files if f.name not in ('.editor_config.json', '.editor_snippets.json')]
 
-        if not json_files:
-            ui.label('No JSON files in this folder.').classes('text-caption')
-            ui.button('Generate Templates', on_click=lambda: _gen_templates()).classes('w-full')
-            return
+            if not json_files:
+                ui.label('No JSON files in this folder.').classes('text-caption')
+                ui.button('Generate Templates', on_click=lambda: _gen_templates()).classes('w-full')
+                return
 
-        with ui.expansion('Create New JSON'):
-            new_fn_input = ui.input('Filename', placeholder='my_prompt_vace').classes('w-full')
+            with ui.expansion('Create New JSON'):
+                new_fn_input = ui.input('Filename', placeholder='my_prompt_vace').classes('w-full')
 
-            def create_new():
-                fn = new_fn_input.value
-                if not fn:
-                    return
-                if not fn.endswith('.json'):
-                    fn += '.json'
-                path = state.current_dir / fn
-                first_item = DEFAULTS.copy()
-                first_item[KEY_SEQUENCE_NUMBER] = 1
-                save_json(path, {KEY_BATCH_DATA: [first_item]})
-                new_fn_input.set_value('')
-                render_file_list.refresh()
+                def create_new():
+                    fn = new_fn_input.value
+                    if not fn:
+                        return
+                    if not fn.endswith('.json'):
+                        fn += '.json'
+                    path = state.current_dir / fn
+                    first_item = DEFAULTS.copy()
+                    first_item[KEY_SEQUENCE_NUMBER] = 1
+                    save_json(path, {KEY_BATCH_DATA: [first_item]})
+                    new_fn_input.set_value('')
+                    render_file_list.refresh()
 
-            ui.button('Create', on_click=create_new).classes('w-full')
+                ui.button('Create', on_click=create_new).classes('w-full')
 
-        ui.label('Select File').classes('text-subtitle2 q-mt-sm')
-        file_names = [f.name for f in json_files]
-        ui.radio(
-            file_names,
-            value=file_names[0] if file_names else None,
-            on_change=lambda e: state._load_file(e.value) if e.value else None,
-        ).classes('w-full')
+            ui.label('Select File').classes('subsection-header q-mt-sm')
+            file_names = [f.name for f in json_files]
+            current = Path(state.loaded_file).name if state.loaded_file else None
+            selected = current if current in file_names else (file_names[0] if file_names else None)
+            ui.radio(
+                file_names,
+                value=selected,
+                on_change=lambda e: state._load_file(e.value) if e.value else None,
+            ).classes('w-full')
 
-        # Auto-load first file if nothing loaded yet
-        if file_names and not state.loaded_file:
-            state._load_file(file_names[0])
+            # Auto-load first file if nothing loaded yet
+            if file_names and not state.loaded_file:
+                state._load_file(file_names[0])
 
-    def _gen_templates():
-        generate_templates(state.current_dir)
-        render_file_list.refresh()
+        def _gen_templates():
+            generate_templates(state.current_dir)
+            render_file_list.refresh()
 
-    render_file_list()
-
-    ui.separator()
+        render_file_list()
 
     # --- Comfy Monitor toggle ---
     def on_monitor_toggle(e):

state.py

@@ -1,5 +1,6 @@
 from dataclasses import dataclass, field
 from pathlib import Path
+from typing import Any, Callable
 
 
 @dataclass
@@ -15,3 +16,17 @@ class AppState:
     timeline_selected_nodes: set = field(default_factory=set)
     live_toggles: dict = field(default_factory=dict)
     show_comfy_monitor: bool = True
+
+    # Set at runtime by main.py / tab_comfy_ng.py
+    _render_main: Any = None
+    _load_file: Callable | None = None
+    _main_rendered: bool = False
+    _live_checkboxes: dict = field(default_factory=dict)
+    _live_refreshables: dict = field(default_factory=dict)
+
+    def create_secondary(self) -> 'AppState':
+        return AppState(
+            config=self.config,
+            current_dir=self.current_dir,
+            snippets=self.snippets,
+        )

tab_batch_ng.py

@@ -13,6 +13,7 @@ from history_tree import HistoryTree
 
 IMAGE_EXTENSIONS = {'.png', '.jpg', '.jpeg', '.webp', '.bmp', '.gif'}
 SUB_SEGMENT_MULTIPLIER = 1000
+FRAME_TO_SKIP_DEFAULT = DEFAULTS['frame_to_skip']
 
 VACE_MODES = [
     'End Extend', 'Pre Extend', 'Middle Extend', 'Edge Extend',
@@ -54,6 +55,15 @@ def next_sub_segment_number(batch_list, parent_seq_num):
             max_sub = max(max_sub, sub_index_of(sn))
     return parent_seq_num * SUB_SEGMENT_MULTIPLIER + max_sub + 1
 
+def max_main_seq_number(batch_list):
+    """Highest non-subsegment sequence number in the batch."""
+    return max(
+        (int(x.get(KEY_SEQUENCE_NUMBER, 0))
+         for x in batch_list if not is_subsegment(x.get(KEY_SEQUENCE_NUMBER, 0))),
+        default=0,
+    )
+
+
 def find_insert_position(batch_list, parent_index, parent_seq_num):
     parent_seq_num = int(parent_seq_num)
     pos = parent_index + 1
@@ -69,34 +79,56 @@ def find_insert_position(batch_list, parent_index, parent_seq_num):
 # --- Helper for repetitive dict-bound inputs ---
 
 def dict_input(element_fn, label, seq, key, **kwargs):
-    """Create an input element bound to seq[key] via blur event."""
+    """Create an input element bound to seq[key] via blur and model-value update."""
     val = seq.get(key, '')
     if isinstance(val, (int, float)):
         val = str(val) if element_fn != ui.number else val
     el = element_fn(label, value=val, **kwargs)
-    el.on('blur', lambda e, k=key: seq.__setitem__(k, e.sender.value))
+
+    def _sync(k=key):
+        seq[k] = el.value
+
+    el.on('blur', lambda _: _sync())
+    el.on('update:model-value', lambda _: _sync())
     return el
 
 
-def dict_number(label, seq, key, **kwargs):
-    """Number input bound to seq[key] via blur."""
-    val = seq.get(key, 0)
+def dict_number(label, seq, key, default=0, **kwargs):
+    """Number input bound to seq[key] via blur and model-value update."""
+    val = seq.get(key, default)
     try:
         # Try float first to handle "1.5" strings, then check if it's a clean int
         fval = float(val)
         val = int(fval) if fval == int(fval) else fval
-    except (ValueError, TypeError):
-        val = 0
+    except (ValueError, TypeError, OverflowError):
+        val = default
     el = ui.number(label, value=val, **kwargs)
-    el.on('blur', lambda e, k=key: seq.__setitem__(
-        k, e.sender.value if e.sender.value is not None else 0))
+
+    def _sync(k=key, d=default):
+        v = el.value
+        if v is None:
+            v = d
+        elif isinstance(v, float):
+            try:
+                v = int(v) if v == int(v) else v
+            except (OverflowError, ValueError):
+                v = d
+        seq[k] = v
+
+    el.on('blur', lambda _: _sync())
+    el.on('update:model-value', lambda _: _sync())
     return el
 
 
 def dict_textarea(label, seq, key, **kwargs):
-    """Textarea bound to seq[key] via blur."""
+    """Textarea bound to seq[key] via blur and model-value update."""
     el = ui.textarea(label, value=seq.get(key, ''), **kwargs)
-    el.on('blur', lambda e, k=key: seq.__setitem__(k, e.sender.value))
+
+    def _sync(k=key):
+        seq[k] = el.value
+
+    el.on('blur', lambda _: _sync())
+    el.on('update:model-value', lambda _: _sync())
     return el
 
 
@@ -107,7 +139,10 @@ def dict_textarea(label, seq, key, **kwargs):
 def render_batch_processor(state: AppState):
     data = state.data_cache
     file_path = state.file_path
-    is_batch_file = KEY_BATCH_DATA in data or isinstance(data, list)
+    if isinstance(data, list):
+        data = {KEY_BATCH_DATA: data}
+        state.data_cache = data
+    is_batch_file = KEY_BATCH_DATA in data
 
     if not is_batch_file:
         ui.label('This is a Single file. To use Batch mode, create a copy.').classes(
@@ -138,74 +173,66 @@ def render_batch_processor(state: AppState):
     batch_list = data.get(KEY_BATCH_DATA, [])
 
     # Source file data for importing
-    json_files = sorted(state.current_dir.glob('*.json'))
-    json_files = [f for f in json_files if f.name not in (
-        '.editor_config.json', '.editor_snippets.json')]
-    file_options = {f.name: f.name for f in json_files}
+    with ui.card().classes('w-full q-pa-md q-mb-lg'):
+        with ui.expansion('Add New Sequence from Source File', icon='playlist_add').classes('w-full'):
+            json_files = sorted(state.current_dir.glob('*.json'))
+            json_files = [f for f in json_files if f.name not in (
+                '.editor_config.json', '.editor_snippets.json')]
+            file_options = {f.name: f.name for f in json_files}
 
-    src_file_select = ui.select(
-        file_options,
-        value=file_path.name,
-        label='Source File:',
-    ).classes('w-64')
+            src_file_select = ui.select(
+                file_options,
+                value=file_path.name,
+                label='Source File:',
+            ).classes('w-64')
 
-    src_seq_select = ui.select([], label='Source Sequence:').classes('w-64')
+            src_seq_select = ui.select([], label='Source Sequence:').classes('w-64')
 
-    # Track loaded source data
-    _src_cache = {'data': None, 'batch': [], 'name': None}
+            # Track loaded source data
+            _src_cache = {'data': None, 'batch': [], 'name': None}
 
-    def _update_src():
-        name = src_file_select.value
-        if name and name != _src_cache['name']:
-            src_data, _ = load_json(state.current_dir / name)
-            _src_cache['data'] = src_data
-            _src_cache['batch'] = src_data.get(KEY_BATCH_DATA, [])
-            _src_cache['name'] = name
-            if _src_cache['batch']:
-                opts = {i: format_seq_label(s.get(KEY_SEQUENCE_NUMBER, i+1))
-                        for i, s in enumerate(_src_cache['batch'])}
-                src_seq_select.set_options(opts, value=0)
-            else:
-                src_seq_select.set_options({})
+            def _update_src():
+                name = src_file_select.value
+                if name and name != _src_cache['name']:
+                    src_data, _ = load_json(state.current_dir / name)
+                    _src_cache['data'] = src_data
+                    _src_cache['batch'] = src_data.get(KEY_BATCH_DATA, [])
+                    _src_cache['name'] = name
+                    if _src_cache['batch']:
+                        opts = {i: format_seq_label(s.get(KEY_SEQUENCE_NUMBER, i+1))
+                                for i, s in enumerate(_src_cache['batch'])}
+                        src_seq_select.set_options(opts, value=0)
+                    else:
+                        src_seq_select.set_options({})
 
-    src_file_select.on_value_change(lambda _: _update_src())
-    _update_src()
+            src_file_select.on_value_change(lambda _: _update_src())
+            _update_src()
 
-    # --- Add New Sequence ---
-    ui.label('Add New Sequence').classes('text-subtitle1 q-mt-md')
+            def _add_sequence(new_item):
+                new_item[KEY_SEQUENCE_NUMBER] = max_main_seq_number(batch_list) + 1
+                for k in [KEY_PROMPT_HISTORY, KEY_HISTORY_TREE, 'note', 'loras']:
+                    new_item.pop(k, None)
+                batch_list.append(new_item)
+                data[KEY_BATCH_DATA] = batch_list
+                save_json(file_path, data)
+                render_sequence_list.refresh()
 
-    def _add_sequence(new_item):
-        max_seq = 0
-        for s in batch_list:
-            sn = int(s.get(KEY_SEQUENCE_NUMBER, 0))
-            if not is_subsegment(sn):
-                max_seq = max(max_seq, sn)
-        new_item[KEY_SEQUENCE_NUMBER] = max_seq + 1
-        for k in [KEY_PROMPT_HISTORY, KEY_HISTORY_TREE, 'note', 'loras']:
-            new_item.pop(k, None)
-        batch_list.append(new_item)
-        data[KEY_BATCH_DATA] = batch_list
-        save_json(file_path, data)
-        render_sequence_list.refresh()
+            with ui.row().classes('q-mt-sm'):
+                def add_empty():
+                    _add_sequence(DEFAULTS.copy())
 
-    with ui.row():
-        def add_empty():
-            _add_sequence(DEFAULTS.copy())
+                def add_from_source():
+                    item = copy.deepcopy(DEFAULTS)
+                    src_batch = _src_cache['batch']
+                    sel_idx = src_seq_select.value
+                    if src_batch and sel_idx is not None:
+                        item.update(copy.deepcopy(src_batch[int(sel_idx)]))
+                    elif _src_cache['data']:
+                        item.update(copy.deepcopy(_src_cache['data']))
+                    _add_sequence(item)
 
-        def add_from_source():
-            item = copy.deepcopy(DEFAULTS)
-            src_batch = _src_cache['batch']
-            sel_idx = src_seq_select.value
-            if src_batch and sel_idx is not None:
-                item.update(copy.deepcopy(src_batch[int(sel_idx)]))
-            elif _src_cache['data']:
-                item.update(copy.deepcopy(_src_cache['data']))
-            _add_sequence(item)
-
-        ui.button('Add Empty', icon='add', on_click=add_empty)
-        ui.button('From Source', icon='file_download', on_click=add_from_source)
-
-    ui.separator()
+                ui.button('Add Empty', icon='add', on_click=add_empty)
+                ui.button('From Source', icon='file_download', on_click=add_from_source)
 
     # --- Standard / LoRA / VACE key sets ---
     lora_keys = ['lora 1 high', 'lora 1 low', 'lora 2 high', 'lora 2 low',
@@ -237,36 +264,36 @@ def render_batch_processor(state: AppState):
             ui.button('Sort by Number', icon='sort', on_click=sort_by_number).props('flat')
 
         for i, seq in enumerate(batch_list):
-            _render_sequence_card(
-                i, seq, batch_list, data, file_path, state,
-                _src_cache, src_seq_select,
-                standard_keys, render_sequence_list,
-            )
+            with ui.card().classes('w-full q-mb-sm'):
+                _render_sequence_card(
+                    i, seq, batch_list, data, file_path, state,
+                    _src_cache, src_seq_select,
+                    standard_keys, render_sequence_list,
+                )
 
     render_sequence_list()
 
-    ui.separator()
-
     # --- Save & Snap ---
-    with ui.row().classes('w-full items-end q-gutter-md'):
-        commit_input = ui.input('Change Note (Optional)',
-                                placeholder='e.g. Added sequence 3').classes('col')
+    with ui.card().classes('w-full q-pa-md q-mt-lg'):
+        with ui.row().classes('w-full items-end q-gutter-md'):
+            commit_input = ui.input('Change Note (Optional)',
+                                    placeholder='e.g. Added sequence 3').classes('col')
 
-        def save_and_snap():
-            data[KEY_BATCH_DATA] = batch_list
-            tree_data = data.get(KEY_HISTORY_TREE, {})
-            htree = HistoryTree(tree_data)
-            snapshot_payload = copy.deepcopy(data)
-            snapshot_payload.pop(KEY_HISTORY_TREE, None)
-            note = commit_input.value if commit_input.value else 'Batch Update'
-            htree.commit(snapshot_payload, note=note)
-            data[KEY_HISTORY_TREE] = htree.to_dict()
-            save_json(file_path, data)
-            state.restored_indicator = None
-            commit_input.set_value('')
-            ui.notify('Batch Saved & Snapshot Created!', type='positive')
+            def save_and_snap():
+                data[KEY_BATCH_DATA] = batch_list
+                tree_data = data.get(KEY_HISTORY_TREE, {})
+                htree = HistoryTree(tree_data)
+                snapshot_payload = copy.deepcopy(data)
+                snapshot_payload.pop(KEY_HISTORY_TREE, None)
+                note = commit_input.value if commit_input.value else 'Batch Update'
+                htree.commit(snapshot_payload, note=note)
+                data[KEY_HISTORY_TREE] = htree.to_dict()
+                save_json(file_path, data)
+                state.restored_indicator = None
+                commit_input.set_value('')
+                ui.notify('Batch Saved & Snapshot Created!', type='positive')
 
-        ui.button('Save & Snap', icon='save', on_click=save_and_snap).props('color=primary')
+            ui.button('Save & Snap', icon='save', on_click=save_and_snap).props('color=primary')
 
 
 # ======================================================================
@@ -276,6 +303,13 @@ def render_batch_processor(state: AppState):
 def _render_sequence_card(i, seq, batch_list, data, file_path, state,
                           src_cache, src_seq_select, standard_keys,
                           refresh_list):
+    def commit(message=None):
+        data[KEY_BATCH_DATA] = batch_list
+        save_json(file_path, data)
+        if message:
+            ui.notify(message, type='positive')
+        refresh_list.refresh()
+
     seq_num = seq.get(KEY_SEQUENCE_NUMBER, i + 1)
 
     if is_subsegment(seq_num):
@@ -299,48 +333,31 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
                 item.pop(KEY_PROMPT_HISTORY, None)
                 item.pop(KEY_HISTORY_TREE, None)
                 batch_list[idx] = item
-                data[KEY_BATCH_DATA] = batch_list
-                save_json(file_path, data)
-                ui.notify('Copied!', type='positive')
-                refresh_list.refresh()
+                commit('Copied!')
 
-            ui.button('Copy Src', icon='file_download', on_click=copy_source).props('dense')
+            ui.button('Copy Src', icon='file_download', on_click=copy_source).props('outline')
 
             # Clone Next
             def clone_next(idx=i, sn=seq_num, s=seq):
                 new_seq = copy.deepcopy(s)
-                max_sn = max(
-                    (int(x.get(KEY_SEQUENCE_NUMBER, 0))
-                     for x in batch_list if not is_subsegment(x.get(KEY_SEQUENCE_NUMBER, 0))),
-                    default=0)
-                new_seq[KEY_SEQUENCE_NUMBER] = max_sn + 1
+                new_seq[KEY_SEQUENCE_NUMBER] = max_main_seq_number(batch_list) + 1
                 if not is_subsegment(sn):
                     pos = find_insert_position(batch_list, idx, int(sn))
                 else:
                     pos = idx + 1
                 batch_list.insert(pos, new_seq)
-                data[KEY_BATCH_DATA] = batch_list
-                save_json(file_path, data)
-                ui.notify('Cloned to Next!', type='positive')
-                refresh_list.refresh()
+                commit('Cloned to Next!')
 
-            ui.button('Clone Next', icon='content_copy', on_click=clone_next).props('dense')
+            ui.button('Clone Next', icon='content_copy', on_click=clone_next).props('outline')
 
             # Clone End
             def clone_end(s=seq):
                 new_seq = copy.deepcopy(s)
-                max_sn = max(
-                    (int(x.get(KEY_SEQUENCE_NUMBER, 0))
-                     for x in batch_list if not is_subsegment(x.get(KEY_SEQUENCE_NUMBER, 0))),
-                    default=0)
-                new_seq[KEY_SEQUENCE_NUMBER] = max_sn + 1
+                new_seq[KEY_SEQUENCE_NUMBER] = max_main_seq_number(batch_list) + 1
                 batch_list.append(new_seq)
-                data[KEY_BATCH_DATA] = batch_list
-                save_json(file_path, data)
-                ui.notify('Cloned to End!', type='positive')
-                refresh_list.refresh()
+                commit('Cloned to End!')
 
-            ui.button('Clone End', icon='vertical_align_bottom', on_click=clone_end).props('dense')
+            ui.button('Clone End', icon='vertical_align_bottom', on_click=clone_end).props('outline')
 
             # Clone Sub
             def clone_sub(idx=i, sn=seq_num, s=seq):
@@ -355,37 +372,18 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
                 new_seq[KEY_SEQUENCE_NUMBER] = next_sub_segment_number(batch_list, p_seq)
                 pos = find_insert_position(batch_list, p_idx, p_seq)
                 batch_list.insert(pos, new_seq)
-                data[KEY_BATCH_DATA] = batch_list
-                save_json(file_path, data)
-                ui.notify(f'Created {format_seq_label(new_seq[KEY_SEQUENCE_NUMBER])}!',
-                          type='positive')
-                refresh_list.refresh()
+                commit(f'Created {format_seq_label(new_seq[KEY_SEQUENCE_NUMBER])}!')
 
-            ui.button('Clone Sub', icon='link', on_click=clone_sub).props('dense')
+            ui.button('Clone Sub', icon='link', on_click=clone_sub).props('outline')
 
-            # Promote
-            def promote(idx=i, s=seq):
-                single_data = copy.deepcopy(s)
-                single_data[KEY_PROMPT_HISTORY] = copy.deepcopy(data.get(KEY_PROMPT_HISTORY, []))
-                single_data[KEY_HISTORY_TREE] = copy.deepcopy(data.get(KEY_HISTORY_TREE, {}))
-                single_data.pop(KEY_SEQUENCE_NUMBER, None)
-                save_json(file_path, single_data)
-                state.data_cache = single_data
-                ui.notify('Converted to Single!', type='positive')
-                # Full refresh so batch tab re-enters render_batch_processor
-                # and sees the file is now single (no KEY_BATCH_DATA)
-                state._render_main.refresh()
-
-            ui.button('Promote', icon='north_west', on_click=promote).props('dense')
+            ui.element('div').classes('col')
 
             # Delete
             def delete(idx=i):
                 batch_list.pop(idx)
-                data[KEY_BATCH_DATA] = batch_list
-                save_json(file_path, data)
-                refresh_list.refresh()
+                commit()
 
-            ui.button(icon='delete', on_click=delete).props('dense color=negative')
+            ui.button(icon='delete', on_click=delete).props('color=negative')
 
         ui.separator()
 
@@ -393,13 +391,13 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
         with ui.splitter(value=66).classes('w-full') as splitter:
             with splitter.before:
                 dict_textarea('General Prompt', seq, 'general_prompt').classes(
-                    'w-full').props('outlined rows=2')
+                    'w-full q-mt-sm').props('outlined rows=2')
                 dict_textarea('General Negative', seq, 'general_negative').classes(
-                    'w-full').props('outlined rows=2')
+                    'w-full q-mt-sm').props('outlined rows=2')
                 dict_textarea('Specific Prompt', seq, 'current_prompt').classes(
-                    'w-full').props('outlined rows=10')
+                    'w-full q-mt-sm').props('outlined rows=10')
                 dict_textarea('Specific Negative', seq, 'negative').classes(
-                    'w-full').props('outlined rows=2')
+                    'w-full q-mt-sm').props('outlined rows=2')
 
             with splitter.after:
                 # Sequence number
@@ -422,17 +420,14 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
                     ui.button(icon='casino', on_click=randomize_seed).props('flat')
 
                 # CFG
-                cfg_val = float(seq.get('cfg', DEFAULTS['cfg']))
-                cfg_input = ui.number('CFG', value=cfg_val, step=0.5,
-                                      format='%.1f').props('outlined').classes('w-full')
-                cfg_input.on('blur', lambda e: seq.__setitem__(
-                    'cfg', e.sender.value if e.sender.value is not None else DEFAULTS['cfg']))
+                dict_number('CFG', seq, 'cfg', default=DEFAULTS['cfg'],
+                            step=0.5, format='%.1f').props('outlined').classes('w-full')
 
                 dict_input(ui.input, 'Camera', seq, 'camera').props('outlined').classes('w-full')
                 dict_input(ui.input, 'FLF', seq, 'flf').props('outlined').classes('w-full')
                 dict_number('End Frame', seq, 'end_frame').props('outlined').classes('w-full')
                 dict_input(ui.input, 'Video File Path', seq, 'video file path').props(
-                    'outlined').classes('w-full')
+                    'outlined input-style="direction: rtl"').classes('w-full')
 
                 # Image paths with preview
                 for img_label, img_key in [
@@ -442,7 +437,7 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
                 ]:
                     with ui.row().classes('w-full items-center'):
                         inp = dict_input(ui.input, img_label, seq, img_key).classes(
-                            'col').props('outlined')
+                            'col').props('outlined input-style="direction: rtl"')
                         img_path = Path(seq.get(img_key, '')) if seq.get(img_key) else None
                         if (img_path and img_path.exists() and
                                 img_path.suffix.lower() in IMAGE_EXTENSIONS):
@@ -450,52 +445,67 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
                                 ui.image(str(img_path)).classes('w-full')
                             ui.button(icon='visibility', on_click=dlg.open).props('flat dense')
 
-                # VACE Settings
-                with ui.expansion('VACE Settings', icon='settings').classes('w-full'):
-                    _render_vace_settings(i, seq, batch_list, data, file_path, refresh_list)
+        # --- VACE Settings (full width) ---
+        with ui.expansion('VACE Settings', icon='settings').classes('w-full'):
+            _render_vace_settings(i, seq, batch_list, data, file_path, refresh_list)
 
         # --- LoRA Settings ---
         with ui.expansion('LoRA Settings', icon='style').classes('w-full'):
-            with ui.row().classes('w-full q-gutter-md'):
-                for lora_idx in range(1, 4):
-                    with ui.column().classes('col'):
-                        ui.label(f'LoRA {lora_idx}').classes('text-subtitle2')
-                        for tier, tier_label in [('high', 'High'), ('low', 'Low')]:
-                            k = f'lora {lora_idx} {tier}'
-                            raw = str(seq.get(k, ''))
-                            disp = raw.replace('<lora:', '').replace('>', '')
+            for lora_idx in range(1, 4):
+                for tier, tier_label in [('high', 'High'), ('low', 'Low')]:
+                    k = f'lora {lora_idx} {tier}'
+                    raw = str(seq.get(k, ''))
+                    inner = raw.replace('<lora:', '').replace('>', '')
+                    # Split "name:strength" or just "name"
+                    if ':' in inner:
+                        parts = inner.rsplit(':', 1)
+                        lora_name = parts[0]
+                        try:
+                            lora_strength = float(parts[1])
+                        except ValueError:
+                            lora_name = inner
+                            lora_strength = 1.0
+                    else:
+                        lora_name = inner
+                        lora_strength = 1.0
 
-                            with ui.row().classes('w-full items-center'):
-                                ui.label('<lora:').classes('text-caption font-mono')
-                                lora_input = ui.input(
-                                    f'L{lora_idx} {tier_label}',
-                                    value=disp,
-                                ).classes('col').props('outlined dense')
-                                ui.label('>').classes('text-caption font-mono')
+                    with ui.row().classes('w-full items-center q-gutter-sm'):
+                        ui.label(f'L{lora_idx} {tier_label}').classes(
+                            'text-caption').style('min-width: 55px')
+                        name_input = ui.input(
+                            'Name',
+                            value=lora_name,
+                        ).classes('col').props('outlined dense')
+                        strength_input = ui.number(
+                            'Str',
+                            value=lora_strength,
+                            min=0, max=10, step=0.1,
+                            format='%.1f',
+                        ).props('outlined dense').style('max-width: 80px')
 
-                                def on_lora_blur(e, key=k):
-                                    v = e.sender.value
-                                    seq[key] = f'<lora:{v}>' if v else ''
+                        def _lora_sync(key=k, n_inp=name_input, s_inp=strength_input):
+                            name = n_inp.value or ''
+                            strength = s_inp.value if s_inp.value is not None else 1.0
+                            seq[key] = f'<lora:{name}:{strength:.1f}>' if name else ''
 
-                                lora_input.on('blur', on_lora_blur)
+                        name_input.on('blur', lambda _, s=_lora_sync: s())
+                        name_input.on('update:model-value', lambda _, s=_lora_sync: s())
+                        strength_input.on('blur', lambda _, s=_lora_sync: s())
+                        strength_input.on('update:model-value', lambda _, s=_lora_sync: s())
 
         # --- Custom Parameters ---
-        ui.separator()
-        ui.label('Custom Parameters').classes('text-caption')
+        ui.label('Custom Parameters').classes('section-header q-mt-md')
 
         custom_keys = [k for k in seq.keys() if k not in standard_keys]
         if custom_keys:
             for k in custom_keys:
                 with ui.row().classes('w-full items-center'):
                     ui.input('Key', value=k).props('readonly outlined dense').classes('w-32')
-                    val_input = ui.input('Value', value=str(seq[k])).props(
-                        'outlined dense').classes('col')
-                    val_input.on('blur', lambda e, key=k: seq.__setitem__(key, e.sender.value))
+                    dict_input(ui.input, 'Value', seq, k).props('outlined dense').classes('col')
 
                     def del_custom(key=k):
                         del seq[key]
-                        save_json(file_path, data)
-                        refresh_list.refresh()
+                        commit()
 
                     ui.button(icon='delete', on_click=del_custom).props('flat dense color=negative')
 
@@ -508,10 +518,9 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
                 v = new_v_input.value
                 if k and k not in seq:
                     seq[k] = v
-                    save_json(file_path, data)
                     new_k_input.set_value('')
                     new_v_input.set_value('')
-                    refresh_list.refresh()
+                    commit()
 
             ui.button('Add', on_click=add_param).props('flat')
 
@@ -521,51 +530,10 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
 # ======================================================================
 
 def _render_vace_settings(i, seq, batch_list, data, file_path, refresh_list):
-    # Frame to Skip + shift
-    with ui.row().classes('w-full items-end'):
-        fts_input = dict_number('Frame to Skip', seq, 'frame_to_skip').classes('col').props(
-            'outlined')
-
-        # Capture original at render time; blur updates seq before click fires
-        _original_fts = int(seq.get('frame_to_skip', 81))
-
-        def shift_fts(idx=i, orig=_original_fts):
-            new_fts = int(fts_input.value) if fts_input.value is not None else orig
-            delta = new_fts - orig
-            if delta == 0:
-                ui.notify('No change to shift', type='info')
-                return
-            shifted = 0
-            for j in range(idx + 1, len(batch_list)):
-                batch_list[j]['frame_to_skip'] = int(
-                    batch_list[j].get('frame_to_skip', 81)) + delta
-                shifted += 1
-            data[KEY_BATCH_DATA] = batch_list
-            save_json(file_path, data)
-            ui.notify(f'Shifted {shifted} sequences by {delta:+d}', type='positive')
-            refresh_list.refresh()
-
-        ui.button('Shift', icon='arrow_downward', on_click=shift_fts).props('dense')
-
-    dict_input(ui.input, 'Transition', seq, 'transition').props('outlined')
-
-    # VACE Schedule
+    # VACE Schedule (needed early for both columns)
     sched_val = max(0, min(int(seq.get('vace schedule', 1)), len(VACE_MODES) - 1))
-    with ui.row().classes('w-full items-center'):
-        vs_input = ui.number('VACE Schedule', value=sched_val, min=0,
-                             max=len(VACE_MODES) - 1).classes('col').props('outlined')
-        vs_input.on('blur', lambda e: seq.__setitem__(
-            'vace schedule', int(e.sender.value) if e.sender.value is not None else 0))
-        mode_label = ui.label(VACE_MODES[sched_val]).classes('text-caption')
 
-        def update_mode_label(e):
-            idx = int(e.sender.value) if e.sender.value is not None else 0
-            idx = max(0, min(idx, len(VACE_MODES) - 1))
-            mode_label.set_text(VACE_MODES[idx])
-
-        vs_input.on('update:model-value', update_mode_label)
-
-    # Mode reference
+    # Mode reference dialog
     with ui.dialog() as ref_dlg, ui.card():
         table_md = (
             '| # | Mode | Formula |\n|:--|:-----|:--------|\n'
@@ -575,30 +543,83 @@ def _render_vace_settings(i, seq, batch_list, data, file_path, refresh_list):
             + '\n\n*All totals snapped to 4n+1 (1,5,9,...,49,...,81,...)*'
         )
         ui.markdown(table_md)
-    ui.button('Mode Reference', icon='help', on_click=ref_dlg.open).props('flat dense')
 
-    # Input A / B frames
-    ia_input = dict_number('Input A Frames', seq, 'input_a_frames').props('outlined')
-    ib_input = dict_number('Input B Frames', seq, 'input_b_frames').props('outlined')
+    with ui.row().classes('w-full q-gutter-md'):
+        # --- Left column ---
+        with ui.column().classes('col'):
+            # Frame to Skip + shift
+            with ui.row().classes('w-full items-end'):
+                fts_input = dict_number('Frame to Skip', seq, 'frame_to_skip').classes(
+                    'col').props('outlined')
 
-    # VACE Length + output calculation
-    input_a = int(seq.get('input_a_frames', 16))
-    input_b = int(seq.get('input_b_frames', 16))
-    stored_total = int(seq.get('vace_length', 49))
-    mode_idx = int(seq.get('vace schedule', 1))
+                _original_fts = int(seq.get('frame_to_skip', FRAME_TO_SKIP_DEFAULT))
 
-    if mode_idx == 0:
-        base_length = max(stored_total - input_a, 1)
-    elif mode_idx == 1:
-        base_length = max(stored_total - input_b, 1)
-    else:
-        base_length = max(stored_total - input_a - input_b, 1)
+                def shift_fts(idx=i, orig=_original_fts):
+                    new_fts = int(fts_input.value) if fts_input.value is not None else orig
+                    delta = new_fts - orig
+                    if delta == 0:
+                        ui.notify('No change to shift', type='info')
+                        return
+                    shifted = 0
+                    for j in range(idx + 1, len(batch_list)):
+                        batch_list[j]['frame_to_skip'] = int(
+                            batch_list[j].get('frame_to_skip', FRAME_TO_SKIP_DEFAULT)) + delta
+                        shifted += 1
+                    data[KEY_BATCH_DATA] = batch_list
+                    save_json(file_path, data)
+                    ui.notify(f'Shifted {shifted} sequences by {delta:+d}', type='positive')
+                    refresh_list.refresh()
 
-    with ui.row().classes('w-full items-center'):
-        vl_input = ui.number('VACE Length', value=base_length, min=1).classes('col').props(
-            'outlined')
-        output_label = ui.label(f'Output: {stored_total}').classes('text-bold')
+                ui.button('Shift', icon='arrow_downward', on_click=shift_fts).props(
+                    'outline').style('height: 40px')
 
+            dict_input(ui.input, 'Transition', seq, 'transition').props('outlined').classes(
+                'w-full q-mt-sm')
+
+            # VACE Schedule
+            with ui.row().classes('w-full items-center q-mt-sm'):
+                vs_input = dict_number('VACE Schedule', seq, 'vace schedule', default=1,
+                                       min=0, max=len(VACE_MODES) - 1).classes('col').props(
+                    'outlined')
+                mode_label = ui.label(VACE_MODES[sched_val]).classes('text-caption')
+                ui.button(icon='help', on_click=ref_dlg.open).props('flat dense round')
+
+                def update_mode_label(e):
+                    idx = int(e.sender.value) if e.sender.value is not None else 0
+                    idx = max(0, min(idx, len(VACE_MODES) - 1))
+                    mode_label.set_text(VACE_MODES[idx])
+
+                vs_input.on('update:model-value', update_mode_label)
+
+        # --- Right column ---
+        with ui.column().classes('col'):
+            ia_input = dict_number('Input A Frames', seq, 'input_a_frames').props(
+                'outlined').classes('w-full')
+            ib_input = dict_number('Input B Frames', seq, 'input_b_frames').props(
+                'outlined').classes('w-full q-mt-sm')
+
+            # VACE Length + output calculation
+            input_a = int(seq.get('input_a_frames', 16))
+            input_b = int(seq.get('input_b_frames', 16))
+            stored_total = int(seq.get('vace_length', 49))
+            mode_idx = int(seq.get('vace schedule', 1))
+
+            if mode_idx == 0:
+                base_length = max(stored_total - input_a, 1)
+            elif mode_idx == 1:
+                base_length = max(stored_total - input_b, 1)
+            else:
+                base_length = max(stored_total - input_a - input_b, 1)
+
+            with ui.row().classes('w-full items-center q-mt-sm'):
+                vl_input = ui.number('VACE Length', value=base_length, min=1).classes(
+                    'col').props('outlined')
+                output_label = ui.label(f'Output: {stored_total}').classes('text-bold')
+
+            dict_number('Reference Switch', seq, 'reference switch').props(
+                'outlined').classes('w-full q-mt-sm')
+
+    # Recalculate VACE output when any input changes
     def recalc_vace(*_args):
         mi = int(vs_input.value) if vs_input.value is not None else 0
         ia = int(ia_input.value) if ia_input.value is not None else 16
@@ -619,8 +640,6 @@ def _render_vace_settings(i, seq, batch_list, data, file_path, refresh_list):
     for inp in (vs_input, ia_input, ib_input, vl_input):
         inp.on('update:model-value', recalc_vace)
 
-    dict_number('Reference Switch', seq, 'reference switch').props('outlined')
-
 
 # ======================================================================
 # Mass Update
@@ -650,13 +669,14 @@ def _render_mass_update(batch_list, data, file_path, state: AppState, refresh_li
         source_select.on_value_change(update_fields)
         update_fields()
 
-        ui.label('Apply to:').classes('text-subtitle2 q-mt-md')
+        ui.label('Apply to:').classes('subsection-header q-mt-md')
         select_all_cb = ui.checkbox('Select All')
         target_checks = {}
-        for idx, s in enumerate(batch_list):
-            sn = s.get(KEY_SEQUENCE_NUMBER, idx + 1)
-            cb = ui.checkbox(format_seq_label(sn))
-            target_checks[idx] = cb
+        with ui.scroll_area().style('max-height: 250px'):
+            for idx, s in enumerate(batch_list):
+                sn = s.get(KEY_SEQUENCE_NUMBER, idx + 1)
+                cb = ui.checkbox(format_seq_label(sn))
+                target_checks[idx] = cb
 
         def on_select_all(e):
             for cb in target_checks.values():

tab_comfy_ng.py

@@ -55,7 +55,7 @@ def render_comfy_monitor(state: AppState):
 
         # Add server section
         ui.separator()
-        ui.label('Add New Server').classes('text-subtitle1')
+        ui.label('Add New Server').classes('section-header')
         with ui.row().classes('w-full items-end'):
             new_name = ui.input('Server Name', placeholder='e.g. Render Node 2').classes('col')
             new_url = ui.input('URL', placeholder='http://192.168.1.50:8188').classes('col')
@@ -78,8 +78,8 @@ def render_comfy_monitor(state: AppState):
 
     # --- Auto-poll timer (every 300s) ---
     # Store live_checkbox references so the timer can update them
-    _live_checkboxes = state._live_checkboxes = getattr(state, '_live_checkboxes', {})
-    _live_refreshables = state._live_refreshables = getattr(state, '_live_refreshables', {})
+    _live_checkboxes = state._live_checkboxes
+    _live_refreshables = state._live_refreshables
 
     def poll_all():
         timeout_val = config.get('monitor_timeout', 0)
@@ -152,18 +152,18 @@ def _render_single_instance(state: AppState, instance_config: dict, index: int,
                 running_cnt = len(queue_data.get('queue_running', []))
                 pending_cnt = len(queue_data.get('queue_pending', []))
 
-                with ui.card().classes('q-pa-sm'):
+                with ui.card().classes('q-pa-md text-center').style('min-width: 100px'):
                     ui.label('Status')
                     ui.label('Online' if running_cnt > 0 else 'Idle').classes(
                         'text-positive' if running_cnt > 0 else 'text-grey')
-                with ui.card().classes('q-pa-sm'):
+                with ui.card().classes('q-pa-md text-center').style('min-width: 100px'):
                     ui.label('Pending')
                     ui.label(str(pending_cnt))
-                with ui.card().classes('q-pa-sm'):
+                with ui.card().classes('q-pa-md text-center').style('min-width: 100px'):
                     ui.label('Running')
                     ui.label(str(running_cnt))
             else:
-                with ui.card().classes('q-pa-sm'):
+                with ui.card().classes('q-pa-md text-center').style('min-width: 100px'):
                     ui.label('Status')
                     ui.label('Offline').classes('text-negative')
                 ui.label(f'Could not connect to {comfy_url}').classes('text-negative')
@@ -173,104 +173,106 @@ def _render_single_instance(state: AppState, instance_config: dict, index: int,
     ui.button('Refresh Status', icon='refresh', on_click=refresh_status).props('flat dense')
 
     # --- Live View ---
-    ui.label('Live View').classes('text-subtitle1 q-mt-md')
-    toggle_key = f'live_toggle_{index}'
+    with ui.card().classes('w-full q-pa-md q-mt-md'):
+        ui.label('Live View').classes('section-header')
+        toggle_key = f'live_toggle_{index}'
 
-    live_checkbox = ui.checkbox('Enable Live Preview', value=False)
-    # Store reference so poll_all timer can disable it on timeout
-    state._live_checkboxes[toggle_key] = live_checkbox
+        live_checkbox = ui.checkbox('Enable Live Preview', value=False)
+        # Store reference so poll_all timer can disable it on timeout
+        state._live_checkboxes[toggle_key] = live_checkbox
 
-    @ui.refreshable
-    def render_live_view():
-        if not live_checkbox.value:
-            ui.label('Live Preview is disabled.').classes('text-caption')
-            return
-
-        # Record start time
-        if toggle_key not in state.live_toggles or state.live_toggles.get(toggle_key) is None:
-            state.live_toggles[toggle_key] = time.time()
-
-        timeout_val = config.get('monitor_timeout', 0)
-        if timeout_val > 0:
-            start = state.live_toggles.get(toggle_key, time.time())
-            remaining = (timeout_val * 60) - (time.time() - start)
-            if remaining <= 0:
-                live_checkbox.set_value(False)
-                state.live_toggles[toggle_key] = None
-                ui.label('Preview timed out.').classes('text-caption')
+        @ui.refreshable
+        def render_live_view():
+            if not live_checkbox.value:
+                ui.label('Live Preview is disabled.').classes('text-caption')
                 return
-            ui.label(f'Auto-off in: {int(remaining)}s').classes('text-caption')
 
-        iframe_h = ui.slider(min=600, max=2500, step=50, value=1000).classes('w-full')
-        ui.label().bind_text_from(iframe_h, 'value', backward=lambda v: f'Height: {v}px')
+            # Record start time
+            if toggle_key not in state.live_toggles or state.live_toggles.get(toggle_key) is None:
+                state.live_toggles[toggle_key] = time.time()
 
-        viewer_base = config.get('viewer_url', '').strip()
-        parsed = urllib.parse.urlparse(viewer_base)
-        if viewer_base and parsed.scheme in ('http', 'https'):
-            safe_src = html.escape(viewer_base, quote=True)
-            ui.label(f'Viewing: {viewer_base}').classes('text-caption')
+            timeout_val = config.get('monitor_timeout', 0)
+            if timeout_val > 0:
+                start = state.live_toggles.get(toggle_key, time.time())
+                remaining = (timeout_val * 60) - (time.time() - start)
+                if remaining <= 0:
+                    live_checkbox.set_value(False)
+                    state.live_toggles[toggle_key] = None
+                    ui.label('Preview timed out.').classes('text-caption')
+                    return
+                ui.label(f'Auto-off in: {int(remaining)}s').classes('text-caption')
 
-            iframe_container = ui.column().classes('w-full')
+            iframe_h = ui.slider(min=600, max=2500, step=50, value=1000).classes('w-full')
+            ui.label().bind_text_from(iframe_h, 'value', backward=lambda v: f'Height: {v}px')
 
-            def update_iframe():
-                iframe_container.clear()
-                with iframe_container:
-                    ui.html(
-                        f'<iframe src="{safe_src}" width="100%" height="{int(iframe_h.value)}px"'
-                        f' style="border: 2px solid #666; border-radius: 8px;"></iframe>'
-                    )
+            viewer_base = config.get('viewer_url', '').strip()
+            parsed = urllib.parse.urlparse(viewer_base)
+            if viewer_base and parsed.scheme in ('http', 'https'):
+                safe_src = html.escape(viewer_base, quote=True)
+                ui.label(f'Viewing: {viewer_base}').classes('text-caption')
 
-            iframe_h.on_value_change(lambda _: update_iframe())
-            update_iframe()
-        else:
-            ui.label('No valid viewer URL configured.').classes('text-warning')
+                iframe_container = ui.column().classes('w-full')
 
-    state._live_refreshables[toggle_key] = render_live_view
-    live_checkbox.on_value_change(lambda _: render_live_view.refresh())
-    render_live_view()
+                def update_iframe():
+                    iframe_container.clear()
+                    with iframe_container:
+                        ui.html(
+                            f'<iframe src="{safe_src}" width="100%" height="{int(iframe_h.value)}px"'
+                            f' style="border: 2px solid #666; border-radius: 8px;"></iframe>'
+                        )
+
+                iframe_h.on_value_change(lambda _: update_iframe())
+                update_iframe()
+            else:
+                ui.label('No valid viewer URL configured.').classes('text-warning')
+
+        state._live_refreshables[toggle_key] = render_live_view
+        live_checkbox.on_value_change(lambda _: render_live_view.refresh())
+        render_live_view()
 
     # --- Latest Output ---
-    ui.label('Latest Output').classes('text-subtitle1 q-mt-md')
-    img_container = ui.column().classes('w-full')
+    with ui.card().classes('w-full q-pa-md q-mt-md'):
+        ui.label('Latest Output').classes('section-header')
+        img_container = ui.column().classes('w-full')
 
-    async def check_image():
-        img_container.clear()
-        loop = asyncio.get_event_loop()
-        res, err = await loop.run_in_executor(
-            None, lambda: _fetch_blocking(f'{comfy_url}/history', timeout=2))
-        with img_container:
-            if err is not None:
-                ui.label(f'Error fetching image: {err}').classes('text-negative')
-                return
-            try:
-                history = res.json()
-            except (ValueError, Exception):
-                ui.label('Invalid response from server').classes('text-negative')
-                return
-            if not history:
-                ui.label('No history found.').classes('text-caption')
-                return
-            last_prompt_id = list(history.keys())[-1]
-            outputs = history[last_prompt_id].get('outputs', {})
-            found_img = None
-            for node_output in outputs.values():
-                if 'images' in node_output:
-                    for img_info in node_output['images']:
-                        if img_info['type'] == 'output':
-                            found_img = img_info
-                            break
+        async def check_image():
+            img_container.clear()
+            loop = asyncio.get_event_loop()
+            res, err = await loop.run_in_executor(
+                None, lambda: _fetch_blocking(f'{comfy_url}/history', timeout=2))
+            with img_container:
+                if err is not None:
+                    ui.label(f'Error fetching image: {err}').classes('text-negative')
+                    return
+                try:
+                    history = res.json()
+                except (ValueError, Exception):
+                    ui.label('Invalid response from server').classes('text-negative')
+                    return
+                if not history:
+                    ui.label('No history found.').classes('text-caption')
+                    return
+                last_prompt_id = list(history.keys())[-1]
+                outputs = history[last_prompt_id].get('outputs', {})
+                found_img = None
+                for node_output in outputs.values():
+                    if 'images' in node_output:
+                        for img_info in node_output['images']:
+                            if img_info['type'] == 'output':
+                                found_img = img_info
+                                break
+                    if found_img:
+                        break
                 if found_img:
-                    break
-            if found_img:
-                params = urllib.parse.urlencode({
-                    'filename': found_img['filename'],
-                    'subfolder': found_img['subfolder'],
-                    'type': found_img['type'],
-                })
-                img_url = f'{comfy_url}/view?{params}'
-                ui.image(img_url).classes('w-full').style('max-width: 600px')
-                ui.label(f'Last Output: {found_img["filename"]}').classes('text-caption')
-            else:
-                ui.label('Last run had no image output.').classes('text-caption')
+                    params = urllib.parse.urlencode({
+                        'filename': found_img['filename'],
+                        'subfolder': found_img['subfolder'],
+                        'type': found_img['type'],
+                    })
+                    img_url = f'{comfy_url}/view?{params}'
+                    ui.image(img_url).classes('w-full').style('max-width: 600px')
+                    ui.label(f'Last Output: {found_img["filename"]}').classes('text-caption')
+                else:
+                    ui.label('Last run had no image output.').classes('text-caption')
 
-    ui.button('Check Latest Image', icon='image', on_click=check_image).props('flat')
+        ui.button('Check Latest Image', icon='image', on_click=check_image).props('flat')

tab_raw_ng.py

@@ -11,64 +11,63 @@ def render_raw_editor(state: AppState):
     data = state.data_cache
     file_path = state.file_path
 
-    ui.label(f'Raw Editor: {file_path.name}').classes('text-h6')
+    with ui.card().classes('w-full q-pa-md'):
+        ui.label(f'Raw Editor: {file_path.name}').classes('text-h6 q-mb-md')
 
-    hide_history = ui.checkbox(
-        'Hide History (Safe Mode)',
-        value=True,
-    )
+        hide_history = ui.checkbox(
+            'Hide History (Safe Mode)',
+            value=True,
+        )
 
-    @ui.refreshable
-    def render_editor():
-        # Prepare display data
-        if hide_history.value:
-            display_data = copy.deepcopy(data)
-            display_data.pop(KEY_HISTORY_TREE, None)
-            display_data.pop(KEY_PROMPT_HISTORY, None)
-        else:
-            display_data = data
+        @ui.refreshable
+        def render_editor():
+            # Prepare display data
+            if hide_history.value:
+                display_data = copy.deepcopy(data)
+                display_data.pop(KEY_HISTORY_TREE, None)
+                display_data.pop(KEY_PROMPT_HISTORY, None)
+            else:
+                display_data = data
 
-        try:
-            json_str = json.dumps(display_data, indent=4, ensure_ascii=False)
-        except Exception as e:
-            ui.notify(f'Error serializing JSON: {e}', type='negative')
-            json_str = '{}'
-
-        text_area = ui.textarea(
-            'JSON Content',
-            value=json_str,
-        ).classes('w-full font-mono').props('outlined rows=30')
-
-        ui.separator()
-
-        def do_save():
             try:
-                input_data = json.loads(text_area.value)
-
-                # Merge hidden history back in if safe mode
-                if hide_history.value:
-                    if KEY_HISTORY_TREE in data:
-                        input_data[KEY_HISTORY_TREE] = data[KEY_HISTORY_TREE]
-                    if KEY_PROMPT_HISTORY in data:
-                        input_data[KEY_PROMPT_HISTORY] = data[KEY_PROMPT_HISTORY]
-
-                save_json(file_path, input_data)
-
-                data.clear()
-                data.update(input_data)
-                state.last_mtime = get_file_mtime(file_path)
-
-                ui.notify('Raw JSON Saved Successfully!', type='positive')
-                render_editor.refresh()
-
-            except json.JSONDecodeError as e:
-                ui.notify(f'Invalid JSON Syntax: {e}', type='negative')
+                json_str = json.dumps(display_data, indent=4, ensure_ascii=False)
             except Exception as e:
-                ui.notify(f'Unexpected Error: {e}', type='negative')
+                ui.notify(f'Error serializing JSON: {e}', type='negative')
+                json_str = '{}'
 
-        ui.button('Save Raw Changes', icon='save', on_click=do_save).props(
-            'color=primary'
-        ).classes('w-full')
+            text_area = ui.textarea(
+                'JSON Content',
+                value=json_str,
+            ).classes('w-full font-mono').props('outlined rows=30')
 
-    hide_history.on_value_change(lambda _: render_editor.refresh())
-    render_editor()
+            def do_save():
+                try:
+                    input_data = json.loads(text_area.value)
+
+                    # Merge hidden history back in if safe mode
+                    if hide_history.value:
+                        if KEY_HISTORY_TREE in data:
+                            input_data[KEY_HISTORY_TREE] = data[KEY_HISTORY_TREE]
+                        if KEY_PROMPT_HISTORY in data:
+                            input_data[KEY_PROMPT_HISTORY] = data[KEY_PROMPT_HISTORY]
+
+                    save_json(file_path, input_data)
+
+                    data.clear()
+                    data.update(input_data)
+                    state.last_mtime = get_file_mtime(file_path)
+
+                    ui.notify('Raw JSON Saved Successfully!', type='positive')
+                    render_editor.refresh()
+
+                except json.JSONDecodeError as e:
+                    ui.notify(f'Invalid JSON Syntax: {e}', type='negative')
+                except Exception as e:
+                    ui.notify(f'Unexpected Error: {e}', type='negative')
+
+            ui.button('Save Raw Changes', icon='save', on_click=do_save).props(
+                'color=primary'
+            ).classes('w-full q-mt-md')
+
+        hide_history.on_value_change(lambda _: render_editor.refresh())
+        render_editor()

tab_timeline_ng.py

@@ -8,6 +8,317 @@ from history_tree import HistoryTree
 from utils import save_json, KEY_BATCH_DATA, KEY_HISTORY_TREE
 
 
+def _delete_nodes(htree, data, file_path, node_ids):
+    """Delete nodes with backup, branch cleanup, and head fallback."""
+    if 'history_tree_backup' not in data:
+        data['history_tree_backup'] = []
+    data['history_tree_backup'].append(copy.deepcopy(htree.to_dict()))
+    for nid in node_ids:
+        htree.nodes.pop(nid, None)
+    for b, tip in list(htree.branches.items()):
+        if tip in node_ids:
+            del htree.branches[b]
+    if htree.head_id in node_ids:
+        if htree.nodes:
+            htree.head_id = sorted(htree.nodes.values(),
+                                   key=lambda x: x['timestamp'])[-1]['id']
+        else:
+            htree.head_id = None
+    data[KEY_HISTORY_TREE] = htree.to_dict()
+    save_json(file_path, data)
+
+
+def _render_selection_picker(all_nodes, htree, state, refresh_fn):
+    """Multi-select picker for batch-deleting timeline nodes."""
+    all_ids = [n['id'] for n in all_nodes]
+
+    def fmt_option(nid):
+        n = htree.nodes[nid]
+        ts = time.strftime('%b %d %H:%M', time.localtime(n['timestamp']))
+        note = n.get('note', 'Step')
+        head = ' (HEAD)' if nid == htree.head_id else ''
+        return f'{note} - {ts} ({nid[:6]}){head}'
+
+    options = {nid: fmt_option(nid) for nid in all_ids}
+
+    def on_selection_change(e):
+        state.timeline_selected_nodes = set(e.value) if e.value else set()
+
+    ui.select(
+        options,
+        value=list(state.timeline_selected_nodes),
+        multiple=True,
+        label='Select nodes to delete:',
+        on_change=on_selection_change,
+    ).classes('w-full')
+
+    with ui.row():
+        def select_all():
+            state.timeline_selected_nodes = set(all_ids)
+            refresh_fn()
+        def deselect_all():
+            state.timeline_selected_nodes = set()
+            refresh_fn()
+        ui.button('Select All', on_click=select_all).props('flat dense')
+        ui.button('Deselect All', on_click=deselect_all).props('flat dense')
+
+
+def _render_graph_or_log(mode, all_nodes, htree, selected_nodes,
+                         selection_mode_on, toggle_select_fn, restore_fn):
+    """Render graph visualization or linear log view."""
+    if mode in ('Horizontal', 'Vertical'):
+        direction = 'LR' if mode == 'Horizontal' else 'TB'
+        with ui.card().classes('w-full q-pa-md'):
+            try:
+                graph_dot = htree.generate_graph(direction=direction)
+                _render_graphviz(graph_dot)
+            except Exception as e:
+                ui.label(f'Graph Error: {e}').classes('text-negative')
+
+    elif mode == 'Linear Log':
+        ui.label('Chronological list of all snapshots.').classes('text-caption')
+        for n in all_nodes:
+            is_head = n['id'] == htree.head_id
+            is_selected = n['id'] in selected_nodes
+
+            card_style = ''
+            if is_selected:
+                card_style = 'background: rgba(239, 68, 68, 0.1) !important; border-left: 3px solid var(--negative);'
+            elif is_head:
+                card_style = 'background: var(--accent-subtle) !important; border-left: 3px solid var(--accent);'
+            with ui.card().classes('w-full q-mb-sm').style(card_style):
+                with ui.row().classes('w-full items-center'):
+                    if selection_mode_on:
+                        ui.checkbox(
+                            '',
+                            value=is_selected,
+                            on_change=lambda e, nid=n['id']: toggle_select_fn(
+                                nid, e.value),
+                        )
+
+                    icon = 'location_on' if is_head else 'circle'
+                    ui.icon(icon).classes(
+                        'text-primary' if is_head else 'text-grey')
+
+                    with ui.column().classes('col'):
+                        note = n.get('note', 'Step')
+                        ts = time.strftime('%b %d %H:%M',
+                                           time.localtime(n['timestamp']))
+                        label = f'{note} (Current)' if is_head else note
+                        ui.label(label).classes('text-bold')
+                        ui.label(
+                            f'ID: {n["id"][:6]} - {ts}').classes('text-caption')
+
+                    if not is_head and not selection_mode_on:
+                        ui.button(
+                            'Restore',
+                            icon='restore',
+                            on_click=lambda node=n: restore_fn(node),
+                        ).props('flat dense color=primary')
+
+
+def _render_batch_delete(htree, data, file_path, state, refresh_fn):
+    """Render batch delete controls for selected timeline nodes."""
+    valid = state.timeline_selected_nodes & set(htree.nodes.keys())
+    state.timeline_selected_nodes = valid
+    count = len(valid)
+    if count == 0:
+        return
+
+    ui.label(
+        f'{count} node{"s" if count != 1 else ""} selected for deletion.'
+    ).classes('text-warning q-mt-md')
+
+    def do_batch_delete():
+        current_valid = state.timeline_selected_nodes & set(htree.nodes.keys())
+        _delete_nodes(htree, data, file_path, current_valid)
+        state.timeline_selected_nodes = set()
+        ui.notify(
+            f'Deleted {len(current_valid)} node{"s" if len(current_valid) != 1 else ""}!',
+            type='positive')
+        refresh_fn()
+
+    ui.button(
+        f'Delete {count} Node{"s" if count != 1 else ""}',
+        icon='delete',
+        on_click=do_batch_delete,
+    ).props('color=negative')
+
+
+def _walk_branch_nodes(htree, tip_id):
+    """Walk parent pointers from tip, returning nodes newest-first."""
+    nodes = []
+    current = tip_id
+    while current and current in htree.nodes:
+        nodes.append(htree.nodes[current])
+        current = htree.nodes[current].get('parent')
+    return nodes
+
+
+def _find_active_branch(htree):
+    """Return branch name whose tip == head_id, or None if detached."""
+    if not htree.head_id:
+        return None
+    for b_name, tip_id in htree.branches.items():
+        if tip_id == htree.head_id:
+            return b_name
+    return None
+
+
+def _render_node_manager(all_nodes, htree, data, file_path, restore_fn, refresh_fn):
+    """Render branch-grouped node manager with restore, rename, delete, and preview."""
+    ui.label('Manage Version').classes('section-header')
+
+    # --- State that survives @ui.refreshable ---
+    active_branch = _find_active_branch(htree)
+
+    # Default branch: active branch, or branch whose ancestry contains HEAD
+    default_branch = active_branch
+    if not default_branch and htree.head_id:
+        for b_name, tip_id in htree.branches.items():
+            for n in _walk_branch_nodes(htree, tip_id):
+                if n['id'] == htree.head_id:
+                    default_branch = b_name
+                    break
+            if default_branch:
+                break
+    if not default_branch and htree.branches:
+        default_branch = next(iter(htree.branches))
+
+    selected = {'node_id': htree.head_id, 'branch': default_branch}
+
+    # --- (a) Branch selector ---
+    def fmt_branch(b_name):
+        count = len(_walk_branch_nodes(htree, htree.branches.get(b_name)))
+        suffix = ' (active)' if b_name == active_branch else ''
+        return f'{b_name} ({count} nodes){suffix}'
+
+    branch_options = {b: fmt_branch(b) for b in htree.branches}
+
+    def on_branch_change(e):
+        selected['branch'] = e.value
+        tip = htree.branches.get(e.value)
+        if tip:
+            selected['node_id'] = tip
+        render_branch_nodes.refresh()
+
+    ui.select(
+        branch_options,
+        value=selected['branch'],
+        label='Branch:',
+        on_change=on_branch_change,
+    ).classes('w-full')
+
+    # --- (b) Node list + (c) Actions panel ---
+    @ui.refreshable
+    def render_branch_nodes():
+        branch_name = selected['branch']
+        tip_id = htree.branches.get(branch_name)
+        nodes = _walk_branch_nodes(htree, tip_id) if tip_id else []
+
+        if not nodes:
+            ui.label('No nodes on this branch.').classes('text-caption q-pa-sm')
+            return
+
+        with ui.scroll_area().classes('w-full').style('max-height: 350px'):
+            for n in nodes:
+                nid = n['id']
+                is_head = nid == htree.head_id
+                is_tip = nid == tip_id
+                is_selected = nid == selected['node_id']
+
+                card_style = ''
+                if is_selected:
+                    card_style = 'border-left: 3px solid var(--primary);'
+                elif is_head:
+                    card_style = 'border-left: 3px solid var(--accent);'
+
+                with ui.card().classes('w-full q-mb-xs q-pa-xs').style(card_style):
+                    with ui.row().classes('w-full items-center no-wrap'):
+                        icon = 'location_on' if is_head else 'circle'
+                        icon_size = 'sm' if is_head else 'xs'
+                        ui.icon(icon, size=icon_size).classes(
+                            'text-primary' if is_head else 'text-grey')
+
+                        with ui.column().classes('col q-ml-xs').style('min-width: 0'):
+                            note = n.get('note', 'Step')
+                            ts = time.strftime('%b %d %H:%M',
+                                               time.localtime(n['timestamp']))
+                            label_text = note
+                            lbl = ui.label(label_text).classes('text-body2 ellipsis')
+                            if is_head:
+                                lbl.classes('text-bold')
+                            ui.label(f'{ts} \u2022 {nid[:6]}').classes(
+                                'text-caption text-grey')
+
+                        if is_head:
+                            ui.badge('HEAD', color='amber').props('dense')
+                        if is_tip and not is_head:
+                            ui.badge('tip', color='green', outline=True).props('dense')
+
+                        def select_node(node_id=nid):
+                            selected['node_id'] = node_id
+                            render_branch_nodes.refresh()
+
+                        ui.button(icon='check_circle', on_click=select_node).props(
+                            'flat dense round size=sm'
+                        ).tooltip('Select this node')
+
+        # --- (c) Actions panel ---
+        sel_id = selected['node_id']
+        if not sel_id or sel_id not in htree.nodes:
+            return
+
+        sel_node = htree.nodes[sel_id]
+        sel_note = sel_node.get('note', 'Step')
+        is_head = sel_id == htree.head_id
+
+        ui.separator().classes('q-my-sm')
+        ui.label(f'Selected: {sel_note} ({sel_id[:6]})').classes(
+            'text-caption text-bold')
+
+        with ui.row().classes('w-full items-end q-gutter-sm'):
+            if not is_head:
+                def restore_selected():
+                    if sel_id in htree.nodes:
+                        restore_fn(htree.nodes[sel_id])
+                ui.button('Restore', icon='restore',
+                          on_click=restore_selected).props('color=primary dense')
+
+            # Rename
+            rename_input = ui.input('Rename Label').classes('col').props('dense')
+
+            def rename_node():
+                if sel_id in htree.nodes and rename_input.value:
+                    htree.nodes[sel_id]['note'] = rename_input.value
+                    data[KEY_HISTORY_TREE] = htree.to_dict()
+                    save_json(file_path, data)
+                    ui.notify('Label updated', type='positive')
+                    refresh_fn()
+
+            ui.button('Update Label', on_click=rename_node).props('flat dense')
+
+        # Danger zone
+        with ui.expansion('Danger Zone', icon='warning').classes(
+                'w-full q-mt-sm').style('border-left: 3px solid var(--negative)'):
+            ui.label('Deleting a node cannot be undone.').classes('text-warning')
+
+            def delete_selected():
+                if sel_id in htree.nodes:
+                    _delete_nodes(htree, data, file_path, {sel_id})
+                    ui.notify('Node Deleted', type='positive')
+                    refresh_fn()
+
+            ui.button('Delete This Node', icon='delete',
+                      on_click=delete_selected).props('color=negative dense')
+
+        # Data preview
+        with ui.expansion('Data Preview', icon='preview').classes('w-full q-mt-sm'):
+            _render_data_preview(sel_id, htree)
+
+    render_branch_nodes()
+
+
 def render_timeline_tab(state: AppState):
     data = state.data_cache
     file_path = state.file_path
@@ -25,7 +336,7 @@ def render_timeline_tab(state: AppState):
             'text-info q-pa-sm')
 
     # --- View mode + Selection toggle ---
-    with ui.row().classes('w-full items-center q-gutter-md'):
+    with ui.row().classes('w-full items-center q-gutter-md q-mb-md'):
         ui.label('Version History').classes('text-h6 col')
         view_mode = ui.toggle(
             ['Horizontal', 'Vertical', 'Linear Log'],
@@ -35,218 +346,23 @@ def render_timeline_tab(state: AppState):
 
     @ui.refreshable
     def render_timeline():
-        # Rebuild node list inside refreshable so it's current after deletes
         all_nodes = sorted(htree.nodes.values(), key=lambda x: x['timestamp'], reverse=True)
         selected_nodes = state.timeline_selected_nodes if selection_mode.value else set()
 
-        # --- Selection picker ---
         if selection_mode.value:
-            all_ids = [n['id'] for n in all_nodes]
+            _render_selection_picker(all_nodes, htree, state, render_timeline.refresh)
 
-            def fmt_option(nid):
-                n = htree.nodes[nid]
-                ts = time.strftime('%b %d %H:%M', time.localtime(n['timestamp']))
-                note = n.get('note', 'Step')
-                head = ' (HEAD)' if nid == htree.head_id else ''
-                return f'{note} - {ts} ({nid[:6]}){head}'
+        _render_graph_or_log(
+            view_mode.value, all_nodes, htree, selected_nodes,
+            selection_mode.value, _toggle_select, _restore_and_refresh)
 
-            options = {nid: fmt_option(nid) for nid in all_ids}
-
-            def on_selection_change(e):
-                state.timeline_selected_nodes = set(e.value) if e.value else set()
-
-            ui.select(
-                options,
-                value=list(state.timeline_selected_nodes),
-                multiple=True,
-                label='Select nodes to delete:',
-                on_change=on_selection_change,
-            ).classes('w-full')
-
-            with ui.row():
-                def select_all():
-                    state.timeline_selected_nodes = set(all_ids)
-                    render_timeline.refresh()
-                def deselect_all():
-                    state.timeline_selected_nodes = set()
-                    render_timeline.refresh()
-                ui.button('Select All', on_click=select_all).props('flat dense')
-                ui.button('Deselect All', on_click=deselect_all).props('flat dense')
-
-        # --- Graph views ---
-        mode = view_mode.value
-        if mode in ('Horizontal', 'Vertical'):
-            direction = 'LR' if mode == 'Horizontal' else 'TB'
-            try:
-                graph_dot = htree.generate_graph(direction=direction)
-                _render_graphviz(graph_dot)
-            except Exception as e:
-                ui.label(f'Graph Error: {e}').classes('text-negative')
-
-        # --- Linear Log view ---
-        elif mode == 'Linear Log':
-            ui.label('Chronological list of all snapshots.').classes('text-caption')
-            for n in all_nodes:
-                is_head = n['id'] == htree.head_id
-                is_selected = n['id'] in selected_nodes
-
-                card_style = ''
-                if is_selected:
-                    card_style = 'background: #3d1f1f !important;'
-                elif is_head:
-                    card_style = 'background: #1a2332 !important;'
-                with ui.card().classes('w-full q-mb-sm').style(card_style):
-                    with ui.row().classes('w-full items-center'):
-                        if selection_mode.value:
-                            ui.checkbox(
-                                '',
-                                value=is_selected,
-                                on_change=lambda e, nid=n['id']: _toggle_select(
-                                    nid, e.value),
-                            )
-
-                        icon = 'location_on' if is_head else 'circle'
-                        ui.icon(icon).classes(
-                            'text-primary' if is_head else 'text-grey')
-
-                        with ui.column().classes('col'):
-                            note = n.get('note', 'Step')
-                            ts = time.strftime('%b %d %H:%M',
-                                               time.localtime(n['timestamp']))
-                            label = f'{note} (Current)' if is_head else note
-                            ui.label(label).classes('text-bold')
-                            ui.label(
-                                f'ID: {n["id"][:6]} - {ts}').classes('text-caption')
-
-                        if not is_head and not selection_mode.value:
-                            ui.button(
-                                'Restore',
-                                icon='restore',
-                                on_click=lambda node=n: _restore_and_refresh(node),
-                            ).props('flat dense color=primary')
-
-        # --- Batch Delete ---
         if selection_mode.value and state.timeline_selected_nodes:
-            valid = state.timeline_selected_nodes & set(htree.nodes.keys())
-            state.timeline_selected_nodes = valid
-            count = len(valid)
-            if count > 0:
-                ui.label(
-                    f'{count} node{"s" if count != 1 else ""} selected for deletion.'
-                ).classes('text-warning q-mt-md')
+            _render_batch_delete(htree, data, file_path, state, render_timeline.refresh)
 
-                def do_batch_delete():
-                    if 'history_tree_backup' not in data:
-                        data['history_tree_backup'] = []
-                    data['history_tree_backup'].append(copy.deepcopy(htree.to_dict()))
-                    for nid in valid:
-                        if nid in htree.nodes:
-                            del htree.nodes[nid]
-                    for b, tip in list(htree.branches.items()):
-                        if tip in valid:
-                            del htree.branches[b]
-                    if htree.head_id in valid:
-                        if htree.nodes:
-                            fallback = sorted(htree.nodes.values(),
-                                              key=lambda x: x['timestamp'])[-1]
-                            htree.head_id = fallback['id']
-                        else:
-                            htree.head_id = None
-                    data[KEY_HISTORY_TREE] = htree.to_dict()
-                    save_json(file_path, data)
-                    state.timeline_selected_nodes = set()
-                    ui.notify(
-                        f'Deleted {count} node{"s" if count != 1 else ""}!',
-                        type='positive')
-                    render_timeline.refresh()
-
-                ui.button(
-                    f'Delete {count} Node{"s" if count != 1 else ""}',
-                    icon='delete',
-                    on_click=do_batch_delete,
-                ).props('color=negative')
-
-        ui.separator()
-
-        # --- Node selector + actions ---
-        ui.label('Manage Version').classes('text-subtitle1 q-mt-md')
-
-        def fmt_node(n):
-            ts = time.strftime('%b %d %H:%M', time.localtime(n['timestamp']))
-            return f'{n.get("note", "Step")} - {ts} ({n["id"][:6]})'
-
-        node_options = {n['id']: fmt_node(n) for n in all_nodes}
-        current_id = htree.head_id if htree.head_id in node_options else (
-            all_nodes[0]['id'] if all_nodes else None)
-
-        selected_node_id = ui.select(
-            node_options,
-            value=current_id,
-            label='Select Version to Manage:',
-        ).classes('w-full')
-
-        with ui.row().classes('w-full items-end q-gutter-md'):
-            def restore_selected():
-                nid = selected_node_id.value
-                if nid and nid in htree.nodes:
-                    _restore_and_refresh(htree.nodes[nid])
-
-            ui.button('Restore Version', icon='restore',
-                      on_click=restore_selected).props('color=primary')
-
-        # Rename
-        with ui.row().classes('w-full items-end q-gutter-md'):
-            rename_input = ui.input('Rename Label').classes('col')
-
-            def rename_node():
-                nid = selected_node_id.value
-                if nid and nid in htree.nodes and rename_input.value:
-                    htree.nodes[nid]['note'] = rename_input.value
-                    data[KEY_HISTORY_TREE] = htree.to_dict()
-                    save_json(file_path, data)
-                    ui.notify('Label updated', type='positive')
-                    render_timeline.refresh()
-
-            ui.button('Update Label', on_click=rename_node).props('flat')
-
-        # Danger zone
-        with ui.expansion('Danger Zone (Delete)', icon='warning').classes('w-full q-mt-md'):
-            ui.label('Deleting a node cannot be undone.').classes('text-warning')
-
-            def delete_selected():
-                nid = selected_node_id.value
-                if nid and nid in htree.nodes:
-                    if 'history_tree_backup' not in data:
-                        data['history_tree_backup'] = []
-                    data['history_tree_backup'].append(
-                        copy.deepcopy(htree.to_dict()))
-                    del htree.nodes[nid]
-                    for b, tip in list(htree.branches.items()):
-                        if tip == nid:
-                            del htree.branches[b]
-                    if htree.head_id == nid:
-                        if htree.nodes:
-                            fallback = sorted(htree.nodes.values(),
-                                              key=lambda x: x['timestamp'])[-1]
-                            htree.head_id = fallback['id']
-                        else:
-                            htree.head_id = None
-                    data[KEY_HISTORY_TREE] = htree.to_dict()
-                    save_json(file_path, data)
-                    ui.notify('Node Deleted', type='positive')
-                    render_timeline.refresh()
-
-            ui.button('Delete This Node', icon='delete',
-                      on_click=delete_selected).props('color=negative')
-
-        # Data preview
-        ui.separator()
-        with ui.expansion('Data Preview', icon='preview').classes('w-full'):
-            @ui.refreshable
-            def render_preview():
-                _render_data_preview(selected_node_id, htree)
-            selected_node_id.on_value_change(lambda _: render_preview.refresh())
-            render_preview()
+        with ui.card().classes('w-full q-pa-md q-mt-md'):
+            _render_node_manager(
+                all_nodes, htree, data, file_path,
+                _restore_and_refresh, render_timeline.refresh)
 
     def _toggle_select(nid, checked):
         if checked:
@@ -281,7 +397,7 @@ def _render_graphviz(dot_source: str):
 
 def _restore_node(data, node, htree, file_path, state: AppState):
     """Restore a history node as the current version."""
-    node_data = node['data']
+    node_data = copy.deepcopy(node['data'])
     if KEY_BATCH_DATA not in node_data and KEY_BATCH_DATA in data:
         del data[KEY_BATCH_DATA]
     data.update(node_data)
@@ -293,9 +409,8 @@ def _restore_node(data, node, htree, file_path, state: AppState):
     ui.notify('Restored!', type='positive')
 
 
-def _render_data_preview(selected_node_id, htree):
+def _render_data_preview(nid, htree):
     """Render a read-only preview of the selected node's data."""
-    nid = selected_node_id.value
     if not nid or nid not in htree.nodes:
         ui.label('No node selected.').classes('text-caption')
         return