Add tree resize handle, pedagogical guides, and UI/comparison enhancements

AGENTS.md

@@ -7,26 +7,34 @@ and German Universal Dependencies trees. Parsing uses the remote LINDAT UDPipe
 service; no local model files are required.
 
 - `app.py`: Gradio layout, styling, explanatory text, and event callbacks. The
-  tabs are Parse (default), Compare, About, and Treebank Guide. Importing this
+  tabs are About, Parse (default), Compare, and Treebank Guide. Importing this
   module constructs the interface; running it directly launches the app.
 - `core/udpipe_client.py`: HTTP client, timeout and request-error handling, and
   optional removal of the CoNLL-U FEATS column.
 - `core/conllu_utils.py`: pandas token tables and comparisons of UPOS, HEAD,
-  and DEPREL. Comparisons skip multiword-token ranges and empty-node IDs.
+  and DEPREL, plus a bounded LRU parse cache. Comparisons skip multiword-token
+  ranges and empty-node IDs.
 - `core/treebanks_data.py`: treebank catalog and language-specific model labels
   mapped to UDPipe model IDs.
 - `visualizer/template.py`: HTML iframe generation, pinned CDN asset URLs,
   and SVG/PNG download code.
 - `visualizer/embed.js`: iframe initialization, direct conllu.js-to-brat
-  conversion, font loading, completion/error handling, and frame sizing.
+  conversion, font loading, hover highlighting, zoom/fullscreen controls,
+  completion/error handling, and frame sizing.
+- `visualizer/ud_help.py`: contextual links for UPOS, dependency relations,
+  and morphological features present in a parse.
+- `visualizer/grew_links.py`: safely escaped exact-form corpus searches using
+  the selected treebank and the service's model metadata when present.
 - `tests/browser/`: deployed-parser fixtures and Playwright CLI browser checks.
 - `examples.json`: curated examples with `language`, `text`, and `phenomenon`.
 - `README.md`: project introduction and Hugging Face Spaces deployment metadata.
 - `requirements.txt`: runtime dependencies, including pinned Gradio 5.48.0.
+  The experimental screencast uses `gradio-screenrecorder==0.0.1`.
 
 ## Setup and Commands
 
-Run commands from the repository root. Use the existing `.venv` when available;
+Run commands from the repository root with Python 3.13, as documented in the
+README and browser checks. Use the existing `.venv` when available;
 otherwise create one:
 
 ```sh
@@ -51,22 +59,46 @@ documentation unless explicitly asked.
   Keep HTTP operations in the client, data processing in `core`, rendering in
   `visualizer`, and UI wiring in `app.py`.
 - Preserve the calm academic styling, English/German examples, and focus on
-  POS tags and dependency arcs. The UI requests morphology-stripped parses.
+  POS tags and dependency arcs. Morphology is stripped by default; the
+  Include morphology checkbox preserves FEATS when selected.
   Use Source Sans Pro for UI text; preserve Liberation Sans and PT Sans Caption
   for dependency trees and keep tree backgrounds white.
+- The Sentence input in both Parse and Compare is intentionally prominent:
+  preserve its 24px font, 1.5 line height, and single-line layout. Gradio renders
+  a one-line Textbox as an `input`, so `.sentence-input` styling must cover both
+  `input` and `textarea`. Do not shrink its text when changing input height.
 - Keep Gradio callback return values aligned with their declared outputs.
   `run_single_or_compare` returns six outputs in this order: visualization,
   primary token table, raw CoNLL-U, status, discrepancy-group visibility, and
   discrepancy table. Check early-return branches when changing this callback.
+- Parse and Compare have independent controls built by `build_parser` and
+  their own session caches. Example selection can change the language, model
+  choices, sentence, source description, and parse results in one callback;
+  `on_example_input` must return 14 outputs, including its no-op branch.
+- Cache keys include model ID, normalized input text, and the morphology
+  stripping flag. Keep morphology-enabled and stripped results separate.
 - Preserve tab-separated CoNLL-U columns and comments. The client currently
   truncates input to the first line; this does not guarantee that UDPipe emits
   only one sentence for multiple sentences on that line.
-- Keep model labels/IDs and catalog entries consistent. Treebank descriptions
-  and statistics also appear in `app.py`; update both locations when relevant.
+- Keep model labels/IDs and catalog entries consistent. The guide tables in
+  `app.py` derive their rows from `TREEBANK_CATALOG`; check accompanying prose
+  when changing the catalog. Model training/statistics use UD 2.17, while
+  Grew exploration uses the separate `GREW_UD_VERSION` (currently 2.18).
   Catalog entries with `ModelID: None` are informational, not selectable models.
+- Selectable parser names include both tooling and training treebank, e.g.
+  `UDPipe · english-ewt-ud-2.17-251125`. These names also label tree results and
+  comparison output; keep browser selectors aligned with UI label changes.
 - Keep each visualization isolated in an iframe with a distinct outer ID.
   Escape sentence data and titles inside the document, then escape the entire
   document for `srcdoc`. Escape dynamic error text inserted into HTML as well.
+- Each tree has a bottom-right resize handle for width and height, with arrow
+  keys for keyboard resizing and double-click to restore automatic fitting.
+  Preserve manual dimensions during zoom, help toggles, and fullscreen changes;
+  comparison trees resize independently. New parse results start with auto fit.
+- Pin parser and renderer revisions separately in `visualizer/template.py`.
+  Preserve the adapter's trailing-newline normalization without changing raw
+  CoNLL-U or internal sentence boundaries. Downloads embed tree fonts and
+  remove temporary hover styling; check the exported files after CSS changes.
 - The comparison renderer currently stacks trees vertically despite its
   `render_side_by_side_visualizers_html` name. Inspect actual behavior before
   relying on function names or docstrings.
@@ -83,10 +115,20 @@ For Python changes, run a syntax check in the activated environment:
 python -m compileall -q app.py core visualizer
 ```
 
+Run deterministic comparison and callback regressions without remote parsing:
+
+```sh
+python -m unittest discover -s tests -p 'test_*.py'
+```
+
 For client or comparison changes, use small CoNLL-U fixtures and mocked HTTP
 responses to check the affected behavior. Useful cases include empty input,
-identical trees, POS/arc differences, token-count mismatches, multiword tokens,
-empty nodes, FEATS stripping, and request failures. Add focused regression tests
+identical trees, POS/arc differences, token-count mismatches, equal-length
+tokenization differences, multiword tokens, empty nodes, multiple sentences,
+FEATS stripping, cache separation, malformed/empty service responses, and
+failure of either model request. Missing parse data must not establish tree
+identity; token alignment must be checked before comparing arcs by position.
+Add focused regression tests
 when fixing substantive logic. Use `tests/browser/check_preview.js` and
 `tests/browser/check_app.js` for rendering and Gradio integration regressions.
 
@@ -96,6 +138,13 @@ input, token tables, raw output, and discrepancy visibility as relevant. Check
 rendered trees and SVG/PNG downloads in a browser; syntax checks cannot verify
 the embedded JavaScript or iframe layout.
 
+Use `tests/browser/build_preview.py` with a static server on port 8765 for
+renderer fixtures and `tests/browser/run_app.py` on port 7871 for deterministic
+Gradio checks. The latter replaces only UDPipe responses; it does not validate
+the HTTP client or live model availability. `check_live.js` exercises actual
+parsing and downloads; `check_recorder.js` covers the experimental recorder.
+Keep generated previews, screenshots, and downloads in ignored output paths.
+
 Live parsing requires network access to LINDAT. Visualization also loads assets
 from jsDelivr and Google Fonts. Distinguish unavailable external services
 from local failures, and report any validation that could not be completed.

README.md

@@ -30,3 +30,15 @@ tree fonts. Asset-loading and parsing failures appear in the visualization area.
 
 See [browser regression checks](tests/browser/README.md) for deterministic
 fixtures, Gradio integration tests, and hosted verification steps.
+
+## Interface Design
+
+The Sentence input is the visual starting point in Parse and Compare. Its
+single-line layout intentionally uses a prominent 24px font with 1.5 line
+height for teaching and screencasts. Preserve this size when adjusting the
+layout. Gradio can render textboxes as either `input` or `textarea` elements;
+the sentence styling covers both.
+
+Drag a tree panel's bottom-right handle to resize its width and height. Focus
+the handle and use arrow keys to resize with the keyboard; double-click it to
+restore automatic fitting. Each comparison tree can be resized independently.

app.py

@@ -3,7 +3,7 @@ Universal Dependencies Parser & Visualizer
 Gradio Web Application following a calm, pedagogical design.
 
 Tabs:
-Parse opens by default; Compare, About, and Treebank Guide provide additional views.
+Tabs are ordered About, Parse, Compare, Treebank Guide; Parse opens by default.
 """
 
 import html
@@ -16,7 +16,7 @@ from gradio_screenrecorder import ScreenRecorder
 import pandas as pd
 
 from core.udpipe_client import UDPipeClient
-from core.conllu_utils import conllu_to_table, compare_trees, BoundedParseCache
+from core.conllu_utils import conllu_to_table, compare_trees, extract_tree_signature, BoundedParseCache
 from core.treebanks_data import TREEBANK_CATALOG, AVAILABLE_MODELS
 from visualizer.template import render_conllu_visualizer_html, render_side_by_side_visualizers_html
 
@@ -55,7 +55,9 @@ html, body, .gradio-container, button, input, select, textarea, .prose {
     padding-right: 16px !important;
     box-sizing: border-box !important;
 }
-.sentence-input textarea {
+/* Gradio uses input for one line and textarea for multiline textboxes.
+   Keep the sentence prominent in either form: 24px is intentional. */
+.sentence-input input, .sentence-input textarea {
     font-size: 24px !important;
     line-height: 1.5 !important;
 }
@@ -85,17 +87,46 @@ html, body, .gradio-container, button, input, select, textarea, .prose {
 """
 
 OVERVIEW_MD = """
-# Universal Dependencies: Parser & Treebank Visualizer
-Parse one sentence or compare two models' POS tags and dependency relations.
-Each model learns from a different annotated treebank.
-
-Training size affects how many examples the parser can learn from, especially
-for rare constructions. Annotation quality and compliance with UD guidelines
-also matter. A model disagreement can reflect an error, ambiguity, or a
-difference in annotation practice; agreement alone does not establish correctness.
-
-The Treebank Guide describes training sizes and annotation provenance, with
-links to the documentation and corpus searches.
+# Explore Linguistic Structures with Universal Dependencies
+
+Use this tool to investigate how words work together in English and German
+sentences. Start with a curated example or enter your own sentence, then follow
+the dependency arcs to explore subjects, objects, modifiers, and clause structure.
+
+- **Parse a sentence.** Choose a UDPipe parser to see its predicted word classes
+  and dependency relations. Each parser name identifies its training treebank
+  and model version. Enable **Include morphology (FEATS)** to explore grammatical
+  features such as case, number, and tense.
+- **Explore heads interactively.** Hover over a word or its POS label to highlight
+  its syntactic head. Hover over dependency arcs to focus on a relation and its
+  connected words. Use this to ask which word a phrase depends on and how
+  modifiers and clauses attach.
+- **Look up the categories in your analysis.** In Parse, the **Help** section
+  links the POS tags, dependency relations, and supported morphological features
+  that occur in the sentence to their Universal Dependencies documentation.
+  Read the definitions and examples, then return to your sentence to interpret
+  the labels. Language-specific relation subtypes link to their base relation
+  when no universal subtype page is available.
+- **Inspect words in real treebanks.** Each word has a link to an exact-form
+  search in **Grew**, using the treebank associated with the selected parser.
+  Compare several corpus examples to discover recurring patterns, alternative
+  attachments, and counterexamples to your first interpretation.
+- **Compare two analyses.** In Compare, choose two UDPipe parsers and inspect
+  their trees and the POS/dependency differences. Ask which analysis best fits
+  the sentence and the UD guidelines, and explain your reasoning.
+
+Open **Annotations** for the token table or **CoNLL-U** for the raw analysis.
+Zoom in on a tree, use fullscreen, or download it as SVG or PNG for discussion
+and teaching. The **Treebank Guide** explains training sizes, text sources, and
+annotation provenance, with links for further corpus exploration. Grew searches
+use the configured exploration release, which can differ from the parser's
+training release.
+
+Treat each automatic analysis as a starting point for investigation: parsers
+can make mistakes, and agreement does not establish correctness. A disagreement
+can reveal ambiguity, a parsing error, or differences in annotation practice.
+Use the highlighting, documentation, and corpus examples to test your ideas
+about linguistic structure.
 """
 
 CONFORMANCE_DOC_MD = """
@@ -168,8 +199,11 @@ def run_single_or_compare(
 
     strip_morphology = not include_morphology
     res_a = client.parse_sentence(sentence, model_id_a, strip_morphology=strip_morphology, cache=cache)
-    if res_a.get("error"):
-        err_msg = f"<div style='color: #ef4444;'>Error: {res_a['error']}</div>"
+    error_a = res_a.get("error")
+    if not error_a and not extract_tree_signature(res_a.get("conllu", "")):
+        error_a = "The primary model returned no usable parse tokens."
+    if error_a:
+        err_msg = f"<div style='color: #ef4444;'>Error: {html.escape(str(error_a))}</div>"
         return err_msg, pd.DataFrame(), "", "", gr.update(visible=False), pd.DataFrame()
 
     conllu_a = res_a["conllu"]
@@ -192,9 +226,9 @@ def run_single_or_compare(
         vis_html = render_conllu_visualizer_html(conllu_a, vis_id="vis-primary", title=primary_model_name, model_id=model_id_a)
         m_name_esc = html.escape(primary_model_name)
         status_html = (
-            f"<div class='diff-alert diff-alert-same'>✓ <strong>Same Model Selected:</strong> "
-            f"Both models are set to <strong>{m_name_esc}</strong> ({len(table_a)} tokens). "
-            f"Select a different second model to inspect differences.</div>"
+            f"<div class='diff-alert diff-alert-same'>✓ <strong>Same UDPipe Parser Selected:</strong> "
+            f"Both parsers are set to <strong>{m_name_esc}</strong> ({len(table_a)} tokens). "
+            f"Select a different second parser to inspect differences.</div>"
         )
         return (
             vis_html,
@@ -209,7 +243,18 @@ def run_single_or_compare(
         model_id_b = models_dict.get(secondary_model_name, list(models_dict.values())[0])
         res_b = client.parse_sentence(sentence, model_id_b, strip_morphology=strip_morphology, cache=cache)
         conllu_b = res_b.get("conllu", "")
-        table_b = conllu_to_table(conllu_b)
+        error_b = res_b.get("error")
+        if not error_b and not extract_tree_signature(conllu_b):
+            error_b = "The secondary model returned no usable parse tokens."
+        if error_b:
+            vis_html = render_conllu_visualizer_html(
+                conllu_a, vis_id="vis-primary", title=primary_model_name, model_id=model_id_a
+            )
+            status_html = (
+                "<div class='diff-alert diff-alert-diff'><strong>Comparison unavailable:</strong> "
+                f"{html.escape(secondary_model_name)}: {html.escape(str(error_b))}</div>"
+            )
+            return vis_html, table_a, conllu_a, status_html, gr.update(visible=False), pd.DataFrame()
 
         # Diff trees
         diff_info = compare_trees(conllu_a, primary_model_name, conllu_b, secondary_model_name)
@@ -223,7 +268,7 @@ def run_single_or_compare(
         raw_conllu_combined = f"# === {primary_model_name} ===\n{conllu_a}\n\n# === {secondary_model_name} ===\n{conllu_b}"
 
         if diff_info["identical"]:
-            status_html = f"<div class='diff-alert diff-alert-same'>✓ <strong>Identical Trees:</strong> Both models produced matching POS tags and syntactic dependency arcs.</div>"
+            status_html = f"<div class='diff-alert diff-alert-same'>✓ <strong>Identical Trees:</strong> Both UDPipe parsers produced matching POS tags and syntactic dependency arcs.</div>"
             diff_visible = False
         else:
             diff_text = html.escape(diff_info["diff_summary"])
@@ -269,17 +314,18 @@ def build_parser(compare=False):
     """Build independent, sentence-first controls for each parsing mode."""
     sentence = gr.Textbox(label="Sentence", value="They buy and sell books.",
                           placeholder="Enter an English or German sentence...",
-                          lines=2, max_lines=2, elem_classes=["sentence-input"])
+                          lines=1, max_lines=1, elem_classes=["sentence-input"])
     with gr.Row():
         language = gr.Dropdown(label="Language", choices=["English", "German"], value="English", scale=1)
-        primary = gr.Dropdown(label="Model" if not compare else "First model",
+        primary = gr.Dropdown(label="UDPipe parser" if not compare else "First UDPipe parser",
                               choices=list(AVAILABLE_MODELS["English"]),
                               value=list(AVAILABLE_MODELS["English"])[0], scale=2)
-        secondary = gr.Dropdown(label="Second model", choices=list(AVAILABLE_MODELS["English"]),
+        secondary = gr.Dropdown(label="Second UDPipe parser", choices=list(AVAILABLE_MODELS["English"]),
                                 value=list(AVAILABLE_MODELS["English"])[1], visible=compare, scale=2)
         with gr.Column(scale=1):
             submit = gr.Button("Compare" if compare else "Parse", variant="primary")
             include_morphology = gr.Checkbox(label="Include morphology (FEATS)", value=False)
+    gr.Markdown("Parser names show UDPipe and the model ID used in the raw CoNLL-U output, including the training treebank and UD release.")
     with gr.Accordion("Examples", open=True):
         selected_example = gr.State(0)
         with gr.Row():
@@ -430,12 +476,12 @@ with gr.Blocks(**_blocks_kwargs) as demo:
         )
 
     with gr.Tabs(selected="tab_parser"):
+        with gr.Tab("About", id="tab_overview"):
+            gr.Markdown(OVERVIEW_MD)
         with gr.Tab("Parse", id="tab_parser"):
             build_parser()
         with gr.Tab("Compare", id="tab_compare"):
             build_parser(compare=True)
-        with gr.Tab("About", id="tab_overview"):
-            gr.Markdown(OVERVIEW_MD)
         with gr.Tab("Treebank Guide", id="tab_guide"):
             with gr.Accordion("Training size, quality and conformance", open=False):
                 # Remove duplicate heading since accordion provides the label

core/conllu_utils.py

@@ -65,7 +65,7 @@ def conllu_to_table(conllu_text: str) -> pd.DataFrame:
     return pd.DataFrame(rows)
 
 
-def extract_tree_signature(conllu_text: str) -> List[Tuple[str, str, str, str]]:
+def extract_tree_signature(conllu_text: str) -> List[Tuple[str, str, str, str, str]]:
     """
     Extracts a list of (ID, Form, UPOS, Head, Deprel) tokens for exact difference comparison.
     """
@@ -101,17 +101,30 @@ def compare_trees(
 
     if not sig_a or not sig_b:
         return {
-            "identical": True,
+            "identical": False,
             "diff_summary": "Insufficient tree data to compare.",
             "diff_table": pd.DataFrame(),
             "discrepancy_count": 0,
         }
 
-    # Match tokens by index
-    min_len = min(len(sig_a), len(sig_b))
+    # Head IDs only refer to corresponding words when tokenization aligns.
+    if [(token[0], token[1]) for token in sig_a] != [(token[0], token[1]) for token in sig_b]:
+        count_mismatch = len(sig_a) != len(sig_b)
+        return {
+            "identical": False,
+            "diff_summary": "Tokenization differs; POS tags and dependency arcs cannot be compared by position.",
+            "diff_table": pd.DataFrame([{
+                "Token": "Tokenization",
+                f"{name_a} (Tokens)": " | ".join(f"{token[0]}: {token[1]}" for token in sig_a),
+                f"{name_b} (Tokens)": " | ".join(f"{token[0]}: {token[1]}" for token in sig_b),
+                "Difference": "Token Count Mismatch" if count_mismatch else "Token Alignment Mismatch",
+            }]),
+            "discrepancy_count": 1,
+        }
+
     differences = []
 
-    for i in range(min_len):
+    for i in range(len(sig_a)):
         id_a, form_a, upos_a, head_a, rel_a = sig_a[i]
         id_b, form_b, upos_b, head_b, rel_b = sig_b[i]
 
@@ -128,16 +141,6 @@ def compare_trees(
                 "Difference": "POS & Syntax" if (pos_diff and dep_diff) else ("POS" if pos_diff else "Syntax Arc"),
             })
 
-    if len(sig_a) != len(sig_b):
-        differences.append({
-            "Token": "Tokenization",
-            f"{name_a} (UPOS)": f"{len(sig_a)} tokens",
-            f"{name_b} (UPOS)": f"{len(sig_b)} tokens",
-            f"{name_a} (Head → Deprel)": "-",
-            f"{name_b} (Head → Deprel)": "-",
-            "Difference": "Token Count Mismatch",
-        })
-
     is_identical = len(differences) == 0
 
     if is_identical:

core/treebanks_data.py

@@ -169,13 +169,13 @@ TREEBANK_CATALOG = [
 
 AVAILABLE_MODELS = {
     "English": {
-        "English-EWT (Web)": "english-ewt-ud-2.17-251125",
-        "English-GUM (Multi-Genre)": "english-gum-ud-2.17-251125",
-        "English-LinES (Literature / Manuals)": "english-lines-ud-2.17-251125"
+        "UDPipe · english-ewt-ud-2.17-251125": "english-ewt-ud-2.17-251125",
+        "UDPipe · english-gum-ud-2.17-251125": "english-gum-ud-2.17-251125",
+        "UDPipe · english-lines-ud-2.17-251125": "english-lines-ud-2.17-251125"
     },
     "German": {
-        "German-HDT (News)": "german-hdt-ud-2.17-251125",
-        "German-GSD (News / Web)": "german-gsd-ud-2.17-251125"
+        "UDPipe · german-hdt-ud-2.17-251125": "german-hdt-ud-2.17-251125",
+        "UDPipe · german-gsd-ud-2.17-251125": "german-gsd-ud-2.17-251125"
     }
 }
 

tests/browser/README.md

@@ -34,9 +34,15 @@ errors when parser or renderer requests are blocked. Negative tests deliberately
 produce failed-request console messages. Screenshots and downloads are saved in
 the ignored `output/playwright/` directory.
 
+The preview checks also cover drag/keyboard panel resizing, retention of manual
+height after zoom, independent comparison frames, and double-click fit reset.
+
 `check_app.js` uses the real UI and callbacks, replacing only UDPipe responses.
 It checks English comparison, single mode, German model updates/comparison,
 repeated analysis, sample selection, and clearing stale trees after empty input.
+It also verifies that both single-line Sentence inputs retain the intentional
+24px font and 36px line height; changing Gradio's input element must not reduce
+their visual prominence.
 The fixture server runs on port 7871; the static fixture server uses port 8765.
 
 For live service verification, run `python app.py` and exercise the same modes

tests/browser/build_preview.py

@@ -12,6 +12,11 @@ GERMAN = '# sentence-label German\n1\tBücher\tBuch\tNOUN\t_\t_\t2\tnsubj\t_\t_\
 ESCAPING = '1\t</textarea></script>&\t_\tNOUN\t_\t_\t0\troot\t_\t_\n'
 MULTIWORD = '1-2\tcan’t\t_\t_\t_\t_\t_\t_\t_\t_\n1\tca\tcan\tAUX\t_\t_\t3\taux\t_\t_\n2\tn’t\tnot\tPART\t_\t_\t3\tadvmod\t_\t_\n3\tgo\tgo\tVERB\t_\t_\t0\troot\t_\t_\n'
 EMPTY = '1\tHello\thello\tINTJ\t_\t_\t0\troot\t_\t_\n1.1\tworld\tworld\tNOUN\t_\t_\t_\t_\t1:dep\t_\n'
+MULTISENTENCE = ENGLISH + '\n' + GERMAN
+WRAPPED = '\n'.join(
+    f'{i}\tword{i}\t_\tNOUN\t_\t_\t{i - 1}\t{"root" if i == 1 else "conj"}\t_\t_'
+    for i in range(1, 31)
+) + '\n'
 CROWDED = "\n".join(
     "\t".join(map(str, [i, word, "_", pos, "_", "_", head, rel, "_", "_"]))
     for i, (word, pos, head, rel) in enumerate([
@@ -30,6 +35,8 @@ def build():
     preview += render_conllu_visualizer_html(MULTIWORD, 'multiword', 'Multiword')
     preview += render_conllu_visualizer_html(EMPTY, 'empty', 'Empty node')
     preview += render_conllu_visualizer_html(CROWDED, 'crowded', 'Crowded label markers', show_help=True)
+    preview += render_conllu_visualizer_html(MULTISENTENCE, 'multisentence', 'Multiple sentences')
+    preview += '<div style="width:500px">' + render_conllu_visualizer_html(WRAPPED, 'wrapped', 'Wrapped sentence') + '</div>'
     output = ROOT / 'output' / 'playwright'
     output.mkdir(parents=True, exist_ok=True)
     (output / 'preview.html').write_text(preview)

tests/browser/check_app.js

@@ -2,6 +2,12 @@ async (page) => {
     await page.goto('http://127.0.0.1:7871');
     const active = () => page.locator('[role="tabpanel"]:visible');
     if (await page.getByRole('tab', {name:'Parse', exact:true}).getAttribute('aria-selected') !== 'true') throw Error('Parse must open first');
+    async function checkSentenceStyle() {
+        const sentence = active().getByRole('textbox', {name:'Sentence', exact:true});
+        const style = await sentence.evaluate(el => ({fontSize:getComputedStyle(el).fontSize, lineHeight:getComputedStyle(el).lineHeight, tag:el.tagName}));
+        if (style.fontSize !== '24px' || style.lineHeight !== '36px' || style.tag !== 'INPUT') throw Error('Sentence must retain prominent single-line styling: ' + JSON.stringify(style));
+    }
+    await checkSentenceStyle();
     const featsCheckbox = active().locator('input[type="checkbox"]');
     if (!await featsCheckbox.count()) throw Error('Expected morphological features checkbox');
 
@@ -29,6 +35,7 @@ async (page) => {
     if (queries.map(q=>q.word).join(',') !== 'books,buy,They' || queries.some(q=>q.corpus !== 'UD_English-EWT@2.18' || q.request !== 'pattern { X [form=' + JSON.stringify(q.word) + '] }')) throw Error('Incorrect word queries: ' + JSON.stringify(queries));
     // 2. Compare mode
     await page.getByRole('tab', {name:'Compare', exact:true}).click();
+    await checkSentenceStyle();
     await analyze(2, 'They', 'Compare');
 
     if (await active().locator('#vis-model-a').contentFrame().locator('.ud-help').count()) throw Error('Help should be limited to Parse');
@@ -48,18 +55,18 @@ async (page) => {
     if (statusText.includes('**')) throw Error('Literal markdown markers (**) found in status HTML');
 
     // 3. Same-model comparison
-    const modelsCount = await active().getByRole('listbox', {name:'Second model', exact:true}).click();
-    await page.getByRole('option', {name:'English-EWT (Web)', exact:true}).click();
+    const modelsCount = await active().getByRole('listbox', {name:'Second UDPipe parser', exact:true}).click();
+    await page.getByRole('option', {name:'UDPipe · english-ewt-ud-2.17-251125', exact:true}).click();
     await active().getByRole('button', {name:'Compare', exact:true}).click();
     await page.waitForFunction(() => {
         const alert = document.querySelector('[role="tabpanel"]:not([style*="display: none"]) .diff-alert-same');
-        return alert && alert.textContent.includes('Same Model Selected');
+        return alert && alert.textContent.includes('Same UDPipe Parser Selected');
     });
 
     // 4. Language change to German in Compare
     await active().getByRole('listbox', {name:'Language', exact:true}).click();
     await page.getByRole('option', {name:'German', exact:true}).click();
-    await page.waitForFunction(() => document.querySelector('input[aria-label="First model"]').value.includes('German-HDT'));
+    await page.waitForFunction(() => document.querySelector('input[aria-label="First UDPipe parser"]').value.includes('german-hdt-ud-2.17-251125'));
 
     // Verify sentence stays as is when changing language
     const currentSentence = await active().getByRole('textbox', {name:'Sentence', exact:true}).inputValue();
@@ -87,12 +94,12 @@ async (page) => {
     }
     await active().getByRole('listbox', {name:'English Examples', exact:true}).click();
     await page.getByRole('option', {name:'The dog that chased the cat barked loudly.', exact:true}).click();
-    await page.waitForFunction(() => Array.from(document.querySelectorAll('textarea')).some(el => el.value === 'The dog that chased the cat barked loudly.'));
+    await page.waitForFunction(() => Array.from(document.querySelectorAll('.sentence-input input, .sentence-input textarea')).some(el => el.value === 'The dog that chased the cat barked loudly.'));
 
     if (await active().getByRole('button', {name:'Use example', exact:true}).count()) throw Error('Redundant example button');
     await active().getByRole('listbox', {name:'German Examples', exact:true}).click();
     await page.getByRole('option', {name:'Der Zug, der um acht Uhr ankommen sollte, hat Verspätung.', exact:true}).click();
-    await page.waitForFunction(() => document.querySelector('input[aria-label="Model"]').value.includes('German-HDT'));
+    await page.waitForFunction(() => document.querySelector('input[aria-label="UDPipe parser"]').value.includes('german-hdt-ud-2.17-251125'));
     if (await active().getByRole('textbox', {name:'Sentence', exact:true}).inputValue() !== 'Der Zug, der um acht Uhr ankommen sollte, hat Verspätung.') throw Error('Cross-language example did not load sentence');
     await active().getByText('Relative clause embedded in subject noun phrase', {exact:true}).waitFor();
     await page.waitForFunction(() => document.querySelectorAll('[role="tabpanel"]:not([style*="display: none"]) iframe[id^="vis-"]').length === 1);

tests/browser/check_live.js

@@ -43,7 +43,7 @@ async (page) => {
     button = 'Compare';
     await panel().getByRole('listbox', {name:'Language', exact:true}).click();
     await app.getByRole('option', {name:'German', exact:true}).click();
-    await app.waitForFunction(() => document.querySelector('input[aria-label="First model"]').value.includes('German-HDT'));
+    await app.waitForFunction(() => document.querySelector('input[aria-label="First UDPipe parser"]').value.includes('german-hdt-ud-2.17-251125'));
     await panel().getByRole('textbox', {name:'Sentence', exact:true}).fill('Bücher überzeugen.');
     const german = await analyze(2, 'Bücher');
     await panel().getByRole('textbox', {name:'Sentence', exact:true}).fill('Bücher überzeugen uns.');

tests/browser/check_preview.js

@@ -16,9 +16,33 @@ async (page) => {
     if (!frames[0].text.includes('nsubj') || !frames[0].text.includes('English')) throw Error('Missing English arc/label');
     if (!frames[1].text.includes('Bücher')) throw Error('Missing Unicode text');
     if (!frames[2].text.includes('</textarea></script>&')) throw Error('Escaping failed');
+    for (const id of ['multisentence', 'wrapped']) {
+        const frame = page.locator('#' + id).contentFrame();
+        const rows = await frame.locator('#vis svg > g.text > text').evaluateAll(elements => elements.map(row => ({
+            text:row.textContent,
+            visible:getComputedStyle(row).display !== 'none' && getComputedStyle(row).visibility !== 'hidden' && row.getBoundingClientRect().height > 0
+        })));
+        if (!rows.length || rows.some(row => !row.visible)) throw Error('Missing word row in ' + id + ': ' + JSON.stringify(rows));
+        const lineCount = await frame.locator('#vis svg > g.text tspan').evaluateAll(words => new Set(words.map(word => Math.round(word.getBoundingClientRect().top))).size);
+        if (lineCount < 2) throw Error('Fixture did not exercise multiple word lines: ' + id);
+        const expected = id === 'multisentence' ? ['They', 'Bücher', 'überzeugen'] : ['word1', 'word15', 'word30'];
+        const visibleText = rows.map(row => row.text).join(' ');
+        if (expected.some(word => !visibleText.includes(word))) throw Error('Missing words in ' + id);
+        const exported = await frame.locator('body').evaluate(() => {
+            const prep = getPreparedSVG();
+            const svg = new DOMParser().parseFromString(prep.xml, 'image/svg+xml');
+            return Array.from(svg.querySelectorAll('g.text > text'), row => ({text:row.textContent, display:row.style.display}));
+        });
+        if (exported.some(row => row.display === 'none') || expected.some(word => !exported.some(row => row.text.includes(word)))) throw Error('Missing exported words in ' + id);
+        await page.waitForFunction(id => {
+            const iframe = document.getElementById(id);
+            return iframe.clientHeight >= iframe.contentDocument.body.getBoundingClientRect().height;
+        }, id);
+        await frame.locator('#vis').screenshot({path:'output/playwright/' + id + '.png'});
+    }
     const overflow = await page.evaluate(() => Array.from(document.querySelectorAll('iframe'), frame => {
         const doc = frame.contentDocument, vis = doc.getElementById('vis');
-        return {horizontal:vis.scrollWidth > vis.clientWidth + 1, vertical:doc.body.getBoundingClientRect().height > frame.clientHeight + 1};
+        return {horizontal:frame.id !== 'wrapped' && vis.scrollWidth > vis.clientWidth + 1, vertical:doc.body.getBoundingClientRect().height > frame.clientHeight + 1};
     }));
     if (overflow.some(value => value.horizontal || value.vertical)) throw Error('Unexpected default scrollbars: ' + JSON.stringify(overflow));
     const crowded = page.locator('#crowded').contentFrame();
@@ -153,6 +177,28 @@ async (page) => {
         const download = await pending;
         await download.saveAs('output/playwright/tree.' + extension);
     }
+    const panel = page.locator('#vis-model-a');
+    const resizeHandle = tree.getByRole('button', {name:'Resize tree panel', exact:true});
+    const initialPanel = await panel.boundingBox();
+    const otherPanel = await page.locator('#vis-model-b').boundingBox();
+    const grip = await resizeHandle.boundingBox();
+    await page.mouse.move(grip.x + grip.width / 2, grip.y + grip.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(grip.x + grip.width / 2 - 100, grip.y + grip.height / 2 + 80, {steps:8});
+    await page.mouse.up();
+    const draggedPanel = await panel.boundingBox();
+    if (Math.abs(draggedPanel.width - (initialPanel.width - 100)) > 3 || Math.abs(draggedPanel.height - (initialPanel.height + 80)) > 3) throw Error('Panel drag resize failed');
+    await resizeHandle.focus();
+    await resizeHandle.press('ArrowDown');
+    await tree.getByRole('button', {name:'Show view controls'}).click();
+    await tree.getByRole('button', {name:'Zoom in', exact:true}).click();
+    const retainedPanel = await panel.boundingBox();
+    if (Math.abs(retainedPanel.height - (draggedPanel.height + 20)) > 3) throw Error('Auto sizing overrode manual height');
+    const untouchedPanel = await page.locator('#vis-model-b').boundingBox();
+    if (Math.abs(untouchedPanel.height - otherPanel.height) > 3 || Math.abs(untouchedPanel.width - otherPanel.width) > 3) throw Error('Resizing changed the other tree');
+    await resizeHandle.dblclick();
+    const resetPanel = await panel.boundingBox();
+    if (Math.abs(resetPanel.width - initialPanel.width) > 3) throw Error('Panel fit reset failed');
     const failures = [];
     for (const pattern of ['**/conllu.js', '**/lib/brat/visualizer.js']) {
         await page.route(pattern, route => route.abort());

tests/test_comparison.py

@@ -0,0 +1,91 @@
+"""Deterministic comparison and callback regressions; no remote parsing."""
+import unittest
+from unittest.mock import patch
+
+import app
+from core.conllu_utils import compare_trees
+
+
+def token(form="word", token_id="1", upos="NOUN", head="0", relation="root"):
+    return f"{token_id}\t{form}\t_\t{upos}\t_\t_\t{head}\t{relation}\t_\t_\n"
+
+
+class ComparisonTests(unittest.TestCase):
+    def compare(self, a, b):
+        return compare_trees(a, "A", b, "B")
+
+    def test_identical_and_annotation_differences(self):
+        a = token()
+        self.assertTrue(self.compare(a, a)["identical"])
+        for b, expected in ((token(upos="VERB"), "POS"),
+                            (token(head="2", relation="obj"), "Syntax Arc"),
+                            (token(upos="VERB", relation="obj"), "POS & Syntax")):
+            with self.subTest(expected=expected):
+                result = self.compare(a, b)
+                self.assertFalse(result["identical"])
+                self.assertEqual(result["diff_table"].iloc[0]["Difference"], expected)
+
+    def test_missing_data_never_establishes_identity(self):
+        for a, b in ((token(), ""), ("", token()), ("", ""), (token(), "# comment\n")):
+            with self.subTest(a=a, b=b):
+                self.assertFalse(self.compare(a, b)["identical"])
+
+    def test_tokenization_mismatch_prevents_arc_comparison(self):
+        for b, expected in ((token("other", upos="VERB"), "Token Alignment Mismatch"),
+                            (token(token_id="2"), "Token Alignment Mismatch"),
+                            (token() + token("extra", "2"), "Token Count Mismatch")):
+            with self.subTest(expected=expected):
+                result = self.compare(token(), b)
+                self.assertFalse(result["identical"])
+                self.assertEqual(result["discrepancy_count"], 1)
+                self.assertEqual(result["diff_table"].iloc[0]["Difference"], expected)
+                self.assertIn("cannot be compared", result["diff_summary"])
+
+    def test_multiword_headers_and_empty_nodes_are_skipped(self):
+        extra = token("combined", "1-2") + token("empty", "1.1")
+        self.assertTrue(self.compare(token(), extra + token())["identical"])
+
+
+class CallbackTests(unittest.TestCase):
+    def run_callback(self, responses):
+        with patch.object(app.client, "parse_sentence", side_effect=responses):
+            result = app.run_single_or_compare(
+                "English", "word", "UDPipe · english-ewt-ud-2.17-251125", True, "UDPipe · english-gum-ud-2.17-251125"
+            )
+        self.assertEqual(len(result), 6)
+        return result
+
+    def test_secondary_failure_preserves_primary_and_clears_differences(self):
+        for response in ({"conllu": "", "error": "Timeout <unsafe>"},
+                         {"conllu": "", "error": None},
+                         {"conllu": "# comment\n", "error": None}):
+            with self.subTest(response=response):
+                result = self.run_callback([{"conllu": token(), "error": None}, response])
+                self.assertIn("<iframe", result[0])
+                self.assertEqual(result[2], token())
+                self.assertIn("Comparison unavailable", result[3])
+                self.assertNotIn("Identical Trees", result[3])
+                self.assertNotIn("<unsafe>", result[3])
+                self.assertFalse(result[4]["visible"])
+                self.assertTrue(result[5].empty)
+
+    def test_primary_failure_clears_outputs(self):
+        for response in ({"conllu": "", "error": "Timeout <unsafe>"},
+                         {"conllu": "", "error": None}):
+            result = self.run_callback([response])
+            self.assertIn("Error:", result[0])
+            self.assertNotIn("<unsafe>", result[0])
+            self.assertTrue(result[1].empty)
+            self.assertEqual(result[2:4], ("", ""))
+            self.assertFalse(result[4]["visible"])
+            self.assertTrue(result[5].empty)
+
+    def test_successful_comparison_status(self):
+        for b, identical in ((token(), True), (token("different"), False), (token(upos="VERB"), False)):
+            result = self.run_callback([{"conllu": token(), "error": None}, {"conllu": b, "error": None}])
+            self.assertEqual("Identical Trees" in result[3], identical)
+            self.assertEqual(result[4]["visible"], not identical)
+
+
+if __name__ == "__main__":
+    unittest.main()

visualizer/embed.js

@@ -5,6 +5,43 @@
     const diagnostics = window.visualizerDiagnostics = {
         parserURL: '__PARSER_URL__', stage: 'loading', messages: []
     };
+    let manualSize = false;
+    const frame = window.frameElement;
+    const handle = document.getElementById('resize-handle');
+    function sizePanel(width, height) {
+        if (!frame) return;
+        manualSize = true;
+        const available = frame.parentElement.clientWidth;
+        frame.style.width = Math.min(available, Math.max(Math.min(320, available), width)) + 'px';
+        frame.style.height = Math.max(parseFloat(getComputedStyle(frame).minHeight) || 280, height) + 'px';
+    }
+    let drag = null;
+    handle.addEventListener('pointerdown', event => {
+        if (!frame || event.button !== 0) return;
+        event.preventDefault();
+        const box = frame.getBoundingClientRect();
+        drag = {x:event.screenX, y:event.screenY, width:box.width, height:box.height};
+        handle.setPointerCapture(event.pointerId);
+    });
+    handle.addEventListener('pointermove', event => {
+        if (drag) sizePanel(drag.width + event.screenX - drag.x, drag.height + event.screenY - drag.y);
+    });
+    handle.addEventListener('pointerup', () => { drag = null; });
+    handle.addEventListener('pointercancel', () => { drag = null; });
+    handle.addEventListener('keydown', event => {
+        if (!frame || !['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) return;
+        event.preventDefault();
+        const box = frame.getBoundingClientRect();
+        sizePanel(box.width + (event.key === 'ArrowRight' ? 20 : event.key === 'ArrowLeft' ? -20 : 0),
+            box.height + (event.key === 'ArrowDown' ? 20 : event.key === 'ArrowUp' ? -20 : 0));
+    });
+    handle.addEventListener('dblclick', () => {
+        manualSize = false;
+        if (frame) {
+            frame.style.width = '100%';
+            frame.style.height = Math.ceil(document.body.getBoundingClientRect().height + 2) + 'px';
+        }
+    });
     function fail(error) {
         diagnostics.stage = 'error';
         diagnostics.error = error.message;
@@ -311,17 +348,16 @@
         const width = svg.width.baseVal.value, height = svg.height.baseVal.value + padding.y * 2 + 2;
         svg.dataset.nativeWidth = width;
         svg.dataset.nativeHeight = height;
-        // Measure actual tree marks (including tokens in the first text row)
-        // so zoom and exports tightly crop to the content. Exclude redundant
-        // multiword text lines and background boxes.
+        // Measure tree marks and words on every rendered row, including wrapped
+        // lines and later sentences, so zoom and exports retain all text.
         const bounds = svg.getBoundingClientRect();
-        const marks = Array.from(svg.querySelectorAll('.span rect, .span path, .span text, .arcs path, .arcs text, svg > g.text > text:first-child tspan, .sentnum path, .sentnum text'));
+        const marks = Array.from(svg.querySelectorAll('.span rect, .span path, .span text, .arcs path, .arcs text, svg > g.text > text tspan, .sentnum path, .sentnum text'));
         const contentWidth = Math.min(width, Math.max(...marks.map(mark => mark.getBoundingClientRect().right - bounds.left)) + 12);
         svg.dataset.contentWidth = contentWidth;
         svg.dataset.contentHeight = height;
         svg.setAttribute('viewBox', '0 0 ' + contentWidth + ' ' + height);
         const resize = () => {
-            if (window.frameElement && !document.fullscreenElement) {
+            if (window.frameElement && !manualSize && !document.fullscreenElement) {
                 window.frameElement.style.height = Math.ceil(document.body.getBoundingClientRect().height + 2) + 'px';
             }
         };

visualizer/template.py

@@ -56,7 +56,7 @@ def render_conllu_visualizer_html(
     """ + stylesheets + """
 
     <style>
-        html { overflow: hidden; }
+        html { overflow: auto; }
         body {
             margin: 0;
             padding: 10px;
@@ -72,6 +72,14 @@ def render_conllu_visualizer_html(
             gap: 8px;
             margin-bottom: 8px;
         }
+        .resize-handle {
+            position: fixed; right: 2px; bottom: 2px; z-index: 2000;
+            width: 24px; height: 24px; display: grid; place-items: center;
+            background: white; color: #526984; border: 1px solid #d1d5db;
+            border-radius: 4px; cursor: nwse-resize; touch-action: none;
+        }
+        .resize-handle:focus-visible { outline: 2px solid #526984; }
+        html:has(:fullscreen) .resize-handle { display: none; }
         .title {
             font-size: 13px;
             font-weight: 600;
@@ -140,7 +148,6 @@ def render_conllu_visualizer_html(
         }
         #vis .background0, #vis .background1 { fill: #ffffff; stroke: none; }
         #vis .background1 { display: none !important; }
-        #vis svg > g.text > text:nth-of-type(n+2) { display: none !important; }
         #vis {
             overflow-x: auto;
             min-height: 180px;
@@ -233,6 +240,8 @@ def render_conllu_visualizer_html(
         """ + grew_html + help_html + """
     </section>
 
+    <div id="resize-handle" class="resize-handle" role="button" tabindex="0"
+         aria-label="Resize tree panel" title="Drag to resize; arrow keys resize; double-click to fit content">◢</div>
     <textarea id="input" style="display:none;">""" + escaped_conllu + """</textarea>
     <p id="status" role="status">Loading visualization…</p>
     <script type="text/javascript">