Fix JSON value viewer crash and add interactive tree view (#78)

* fix: use Syntax highlighting for JSON in value viewer to prevent markup parsing crash

JSON data containing bracket patterns like [0,23] was being interpreted as
Rich markup tags, causing MarkupError crashes in Preview (v) and View (V).

- Use rich.Syntax for JSON content with syntax highlighting
- Set markup=False on Static widgets for non-JSON content
- Store raw value separately in ValueViewScreen for copy functionality

* feat: add interactive JSON tree viewer for cell preview

Add collapsible tree view for JSON data in Preview (v) and View (V) modes:

- New JSONTreeView widget with expand/collapse support
- Tree view is default for valid JSON, with syntax highlighting fallback
- Key bindings: t (toggle tree/syntax), E (expand all), Z (collapse all)
- Proper focus management and scrolling in both view modes
- Simplified footer hints to avoid duplication with app bindings

The tree view makes exploring nested JSON (like Twitter API responses)
much easier than scrolling through syntax-highlighted text.

* chore: fix ruff lint errors (unused imports, extraneous f-strings)

* refactor: integrate JSON tree viewer with hierarchical state machine

Address maintainer feedback on PR #78:

- Remove manual key handling from InlineValueView widget
- Create ValueViewTreeModeState and ValueViewSyntaxModeState child states
- Register actions via _setup_actions() using hierarchical state machine
- Add shared parse_json_value() to eliminate duplicate JSON detection
- Display keybindings in footer via get_display_bindings()
- Use lowercase 'z' for collapse all (per maintainer preference)
- Remove 'e'/'E' expand binding (enter is textual default)
- Show contextual toggle labels: "Syntax View" / "Tree View"
- Add value_view_tree_mode and value_view_is_json to InputContext

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

* feat: add copy submenu for JSON tree view with visual feedback

Add contextual copy options when viewing JSON in tree mode:
- yy: Copy current node's value
- yf: Copy field as "key": value format
- ya: Copy entire JSON

Follows existing 'ry' (results yank) menu pattern. Includes visual
flash feedback on copy (cursor flash for value/field, background
flash for all).

Syntax mode retains direct copy behavior (no submenu).

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

* test: add regression tests for JSON tree view feature

Add tests for parse_json_value function and state machine guards to ensure
JSON tree view only activates for valid JSON content.

Fix bug in ValueViewSyntaxModeState.is_active() that was missing the
value_view_is_json check, which would have allowed toggle for non-JSON content.

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

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Peter Adams <18162810+Maxteabag@users.noreply.github.com>

Author: 3 people

sqlit/core/input_context.py

@@ -21,6 +21,8 @@ class InputContext:
     autocomplete_visible: bool
     results_filter_active: bool
     value_view_active: bool
+    value_view_tree_mode: bool
+    value_view_is_json: bool
     query_executing: bool
     modal_open: bool
     has_connection: bool

sqlit/core/keymap.py

@@ -286,6 +286,10 @@ def _build_leader_commands(self) -> list[LeaderCommandDef]:
             # rye results export menu
             LeaderCommandDef("c", "csv", "Export as CSV", "Export", menu="rye"),
             LeaderCommandDef("j", "json", "Export as JSON", "Export", menu="rye"),
+            # vy value view yank menu (tree mode)
+            LeaderCommandDef("y", "value", "Copy value", "Copy", menu="vy"),
+            LeaderCommandDef("f", "field", "Copy field", "Copy", menu="vy"),
+            LeaderCommandDef("a", "all", "Copy all", "Copy", menu="vy"),
         ]
 
     def _build_action_keys(self) -> list[ActionKeyDef]:
@@ -380,6 +384,8 @@ def _build_action_keys(self) -> list[ActionKeyDef]:
             ActionKeyDef("q", "close_value_view", "value_view"),
             ActionKeyDef("escape", "close_value_view", "value_view"),
             ActionKeyDef("y", "copy_value_view", "value_view"),
+            ActionKeyDef("t", "toggle_value_view_mode", "value_view"),
+            ActionKeyDef("z", "collapse_all_json_nodes", "value_view"),
         ]
 
 

sqlit/domains/results/state/__init__.py

@@ -2,10 +2,16 @@
 
 from .results_filter_active import ResultsFilterActiveState
 from .results_focused import ResultsFocusedState
-from .value_view_active import ValueViewActiveState
+from .value_view_active import (
+    ValueViewActiveState,
+    ValueViewSyntaxModeState,
+    ValueViewTreeModeState,
+)
 
 __all__ = [
     "ResultsFilterActiveState",
     "ResultsFocusedState",
     "ValueViewActiveState",
+    "ValueViewSyntaxModeState",
+    "ValueViewTreeModeState",
 ]

sqlit/domains/results/state/value_view_active.py

@@ -1,4 +1,4 @@
-"""Inline value view state."""
+"""Value view states for tree and syntax modes."""
 
 from __future__ import annotations
 
@@ -7,14 +7,21 @@
 
 
 class ValueViewActiveState(State):
-    """Inline value view is active (viewing a cell's full content)."""
+    """Base state for inline value view (viewing a cell's full content)."""
 
     help_category = "Value View"
 
     def _setup_actions(self) -> None:
         self.allows("close_value_view", key="escape", label="Close", help="Close value view")
         self.allows("close_value_view", key="q", label="Close", help="Close value view")
         self.allows("copy_value_view", key="y", label="Copy", help="Copy value")
+        self.allows(
+            "toggle_value_view_mode",
+            lambda app: app.value_view_is_json,
+            key="t",
+            label="Toggle",
+            help="Toggle tree/syntax view",
+        )
 
     def get_display_bindings(self, app: InputContext) -> tuple[list[DisplayBinding], list[DisplayBinding]]:
         left: list[DisplayBinding] = [
@@ -25,3 +32,65 @@ def get_display_bindings(self, app: InputContext) -> tuple[list[DisplayBinding],
 
     def is_active(self, app: InputContext) -> bool:
         return app.value_view_active
+
+
+class ValueViewTreeModeState(State):
+    """Value view is in tree mode (JSON tree viewer)."""
+
+    help_category = "Value View"
+
+    def _setup_actions(self) -> None:
+        self.allows("collapse_all_json_nodes", key="z", label="Collapse", help="Collapse all nodes")
+        self.allows("toggle_value_view_mode", key="t", label="Syntax View", help="Switch to syntax view")
+
+    def get_display_bindings(self, app: InputContext) -> tuple[list[DisplayBinding], list[DisplayBinding]]:
+        left: list[DisplayBinding] = [
+            DisplayBinding(key="z", label="Collapse", action="collapse_all_json_nodes"),
+            DisplayBinding(key="t", label="Syntax View", action="toggle_value_view_mode"),
+        ]
+
+        # Get parent bindings
+        if self.parent:
+            parent_left, parent_right = self.parent.get_display_bindings(app)
+            seen = {b.action for b in left}
+            for binding in parent_left:
+                if binding.action not in seen:
+                    left.append(binding)
+                    seen.add(binding.action)
+            return left, parent_right
+
+        return left, []
+
+    def is_active(self, app: InputContext) -> bool:
+        return app.value_view_active and app.value_view_is_json and app.value_view_tree_mode
+
+
+class ValueViewSyntaxModeState(State):
+    """Value view is in syntax mode (syntax-highlighted text)."""
+
+    help_category = "Value View"
+
+    def _setup_actions(self) -> None:
+        self.allows("toggle_value_view_mode", key="t", label="Tree View", help="Switch to tree view")
+
+    def get_display_bindings(self, app: InputContext) -> tuple[list[DisplayBinding], list[DisplayBinding]]:
+        left: list[DisplayBinding] = []
+
+        # Only show Tree toggle for JSON content
+        if app.value_view_is_json:
+            left.append(DisplayBinding(key="t", label="Tree View", action="toggle_value_view_mode"))
+
+        # Get parent bindings
+        if self.parent:
+            parent_left, parent_right = self.parent.get_display_bindings(app)
+            seen = {b.action for b in left}
+            for binding in parent_left:
+                if binding.action not in seen:
+                    left.append(binding)
+                    seen.add(binding.action)
+            return left, parent_right
+
+        return left, []
+
+    def is_active(self, app: InputContext) -> bool:
+        return app.value_view_active and app.value_view_is_json and not app.value_view_tree_mode

sqlit/domains/results/ui/mixins/results.py

@@ -214,14 +214,96 @@ def action_close_value_view(self: ResultsMixinHost) -> None:
             pass
 
     def action_copy_value_view(self: ResultsMixinHost) -> None:
-        """Copy the value from the inline value view."""
+        """Copy the value from the inline value view.
+
+        In tree mode with JSON, opens the vy yank menu.
+        In syntax mode, copies the full value directly.
+        """
+        from sqlit.shared.ui.widgets import InlineValueView, flash_widget
+
+        try:
+            value_view = self.query_one("#value-view", InlineValueView)
+            if not value_view.is_visible:
+                return
+            # In tree mode with JSON, open the yank menu
+            if value_view._is_json and value_view._tree_mode:
+                self._start_leader_pending("vy")
+                return
+            # In syntax mode, copy directly
+            self._copy_text(value_view.value)
+            flash_widget(value_view)
+        except Exception:
+            pass
+
+    def action_vy_value(self: ResultsMixinHost) -> None:
+        """Copy the current node's value (from yank menu)."""
+        from sqlit.shared.ui.widgets import InlineValueView, flash_widget
+
+        self._clear_leader_pending()
+        try:
+            value_view = self.query_one("#value-view", InlineValueView)
+            if value_view.is_visible:
+                text = value_view.get_cursor_value_json()
+                if text:
+                    self._copy_text(text)
+                    tree = value_view.get_tree_widget()
+                    if tree:
+                        flash_widget(tree, "flash-cursor")
+        except Exception:
+            pass
+
+    def action_vy_field(self: ResultsMixinHost) -> None:
+        """Copy the current field as 'key': value (from yank menu)."""
+        from sqlit.shared.ui.widgets import InlineValueView, flash_widget
+
+        self._clear_leader_pending()
+        try:
+            value_view = self.query_one("#value-view", InlineValueView)
+            if value_view.is_visible:
+                text = value_view.get_cursor_field_json()
+                if text:
+                    self._copy_text(text)
+                    tree = value_view.get_tree_widget()
+                    if tree:
+                        flash_widget(tree, "flash-cursor")
+        except Exception:
+            pass
+
+    def action_vy_all(self: ResultsMixinHost) -> None:
+        """Copy the full JSON (from yank menu)."""
         from sqlit.shared.ui.widgets import InlineValueView, flash_widget
 
+        self._clear_leader_pending()
         try:
             value_view = self.query_one("#value-view", InlineValueView)
             if value_view.is_visible:
                 self._copy_text(value_view.value)
-                flash_widget(value_view)
+                tree = value_view.get_tree_widget()
+                if tree:
+                    flash_widget(tree, "flash-all")
+        except Exception:
+            pass
+
+    def action_toggle_value_view_mode(self: ResultsMixinHost) -> None:
+        """Toggle between tree and syntax view in the inline value view."""
+        from sqlit.shared.ui.widgets import InlineValueView
+
+        try:
+            value_view = self.query_one("#value-view", InlineValueView)
+            if value_view.is_visible:
+                value_view.toggle_view_mode()
+                self._update_footer_bindings()
+        except Exception:
+            pass
+
+    def action_collapse_all_json_nodes(self: ResultsMixinHost) -> None:
+        """Collapse all nodes in the JSON tree view."""
+        from sqlit.shared.ui.widgets import InlineValueView
+
+        try:
+            value_view = self.query_one("#value-view", InlineValueView)
+            if value_view.is_visible:
+                value_view.collapse_all_nodes()
         except Exception:
             pass