sql-dialect-master 1.1.1__py3-none-any.whl

frontend/ui/diff.py

@@ -0,0 +1,275 @@
+"""Semantic Diff UI components for SQL Dialect Master v2.
+
+Renders the finding list, finding detail/inspector, and text diff view.
+All data comes from SemanticDiffViewModel — no direct backend access.
+"""
+from __future__ import annotations
+
+import streamlit as st
+
+from frontend.core.design_tokens import ColorTokens
+from frontend.core.escaping import esc
+from frontend.core.viewmodels import (
+    SemanticDiffViewModel,
+    SemanticFindingViewModel,
+)
+
+
+def render_semantic_diff_workspace(
+    vm: SemanticDiffViewModel,
+    source_sql: str,
+    target_sql: str,
+    theme: ColorTokens,
+    selected_finding_index: int | None = None,
+) -> None:
+    """Render the full Semantic Diff workspace with finding list and inspector.
+
+    Args:
+        vm: SemanticDiffViewModel from backend
+        source_sql: Raw source SQL for display
+        target_sql: Raw target SQL for display
+        theme: Current theme tokens
+        selected_finding_index: Index of selected finding (for inspector)
+    """
+    _render_overall_status(vm, theme)
+
+    if vm.parse_error:
+        st.error(f"Parse error: {esc(vm.parse_error)}")
+        return
+
+    col_findings, col_inspector = st.columns([2, 1])
+
+    with col_findings:
+        _render_finding_list(vm, selected_finding_index, theme)
+
+    with col_inspector:
+        if selected_finding_index is not None and 0 <= selected_finding_index < len(vm.findings):
+            _render_finding_inspector(vm.findings[selected_finding_index], theme)
+        else:
+            _render_inspector_placeholder(theme)
+
+    # Tabs for Semantic vs Text diff
+    st.markdown("---")
+    _render_diff_tabs(vm, source_sql, target_sql, theme)
+
+
+def _render_overall_status(vm: SemanticDiffViewModel, theme: ColorTokens) -> None:
+    """Render the overall semantic classification banner."""
+    severity_colors = {
+        "valid": theme.success,
+        "warning": theme.warning,
+        "error": theme.danger,
+        "info": theme.info,
+        "neutral": theme.text_muted,
+    }
+    color = severity_colors.get(vm.overall_status, theme.text_muted)
+
+    # Finding summary
+    summary_parts = []
+    if vm.error_count:
+        summary_parts.append(f"{vm.error_count} error{'s' if vm.error_count > 1 else ''}")
+    if vm.warning_count:
+        summary_parts.append(f"{vm.warning_count} warning{'s' if vm.warning_count > 1 else ''}")
+    summary = " · ".join(summary_parts) if summary_parts else "No findings"
+
+    st.markdown(
+        f"""
+        <div style="display:flex; align-items:center; justify-content:space-between;
+                    padding:12px 16px; background:{color}12; border:1px solid {color}30;
+                    border-radius:6px; margin-bottom:16px;">
+            <div>
+                <div style="font-size:11px; font-weight:600; letter-spacing:0.06em;
+                            text-transform:uppercase; color:{color};">
+                    {esc(vm.classification_label)}
+                </div>
+                <div style="font-size:12px; color:{theme.text_secondary}; margin-top:2px;">
+                    {esc(vm.source_dialect)} → {esc(vm.target_dialect)} · {summary}
+                </div>
+            </div>
+            <div style="text-align:right;">
+                <div style="font-size:11px; color:{theme.text_muted};">confidence</div>
+                <div style="font-size:18px; font-weight:700; color:{color}; font-family:monospace;">
+                    {vm.confidence:.0%}
+                </div>
+            </div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def _render_finding_list(vm: SemanticDiffViewModel, selected_idx: int | None, theme: ColorTokens) -> None:
+    """Render the findings list."""
+    st.markdown(
+        f'<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; '
+        f'text-transform:uppercase; color:{theme.text_muted}; margin-bottom:8px;">'
+        f'Findings ({vm.finding_count})</div>',
+        unsafe_allow_html=True,
+    )
+
+    if not vm.findings:
+        st.info("No semantic differences detected.")
+        return
+
+    for i, finding in enumerate(vm.findings):
+        is_selected = i == selected_idx
+        bg = theme.selected_bg if is_selected else theme.surface
+        border_color = theme.accent if is_selected else theme.border
+        icon = "●" if finding.severity == "error" else "○"
+        icon_color = theme.danger if finding.severity == "error" else theme.warning
+
+        st.markdown(
+            f"""
+            <div class="sdm-finding-item" data-index="{i}"
+                 style="padding:10px 12px; margin-bottom:4px; background:{bg};
+                        border:1px solid {border_color}; border-radius:6px;
+                        cursor:pointer; transition:all 0.15s;"
+                 onmouseover="this.style.background='{theme.hover_bg}'"
+                 onmouseout="this.style.background='{bg}'">
+                <div style="display:flex; align-items:center; gap:8px; margin-bottom:4px;">
+                    <span style="color:{icon_color}; font-size:10px;">{icon}</span>
+                    <span style="font-size:12px; font-weight:600; color:{theme.text_primary};">
+                        {esc(finding.category_label)}
+                    </span>
+                    <span style="margin-left:auto; font-size:10px; font-weight:600;
+                                 padding:2px 6px; border-radius:3px;
+                                 background:{theme.danger}15; color:{theme.danger};">
+                        {esc(finding.severity_label)}
+                    </span>
+                </div>
+                <div style="font-size:11px; color:{theme.text_secondary}; line-height:1.4;">
+                    {esc(finding.explanation[:100])}
+                    {'...' if len(finding.explanation) > 100 else ''}
+                </div>
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+
+        if st.button("Select", key=f"find_{i}", help=f"View {finding.category} finding details"):
+            st.session_state.sdm_selected_finding_index = i
+            st.rerun()
+
+
+def _render_finding_inspector(finding: SemanticFindingViewModel, theme: ColorTokens) -> None:
+    """Render the detail inspector for a selected finding."""
+    st.markdown(
+        f'<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; '
+        f'text-transform:uppercase; color:{theme.text_muted}; margin-bottom:12px;">'
+        f'Finding #{finding.index + 1} · {esc(finding.category_label)}</div>',
+        unsafe_allow_html=True,
+    )
+
+    # Severity badge
+    sev_color = theme.danger if finding.severity == "error" else theme.warning
+    st.markdown(
+        f'<div style="display:inline-block; padding:3px 8px; border-radius:3px; '
+        f'background:{sev_color}15; color:{sev_color}; font-size:11px; font-weight:600; '
+        f'letter-spacing:0.05em; margin-bottom:12px;">'
+        f'{esc(finding.severity_label)}</div>',
+        unsafe_allow_html=True,
+    )
+
+    # Explanation
+    st.markdown(
+        '<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; '
+        'text-transform:uppercase; color:' + theme.text_muted + '; margin:12px 0 6px;">'
+        'Explanation</div>',
+        unsafe_allow_html=True,
+    )
+    st.markdown(f'<div style="font-size:12px; color:{theme.text_primary}; line-height:1.6;">'
+                f'{esc(finding.explanation)}</div>', unsafe_allow_html=True)
+
+    # Source fragment
+    st.markdown(
+        '<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; '
+        'text-transform:uppercase; color:' + theme.text_muted + '; margin:12px 0 6px;">'
+        'Source Fragment</div>',
+        unsafe_allow_html=True,
+    )
+    if finding.source_fragment:
+        st.code(finding.source_fragment, language="sql")
+    else:
+        st.caption("Not available")
+
+    # Target fragment
+    st.markdown(
+        '<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; '
+        'text-transform:uppercase; color:' + theme.text_muted + '; margin:12px 0 6px;">'
+        'Target Fragment</div>',
+        unsafe_allow_html=True,
+    )
+    if finding.target_fragment:
+        st.code(finding.target_fragment, language="sql")
+    else:
+        st.caption("Not available")
+
+    # Evidence
+    if finding.evidence:
+        st.markdown(
+            '<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; '
+            'text-transform:uppercase; color:' + theme.text_muted + '; margin:12px 0 6px;">'
+            'Evidence</div>',
+            unsafe_allow_html=True,
+        )
+        st.caption(f"`{esc(finding.evidence)}`")
+
+
+def _render_inspector_placeholder(theme: ColorTokens) -> None:
+    """Render the empty inspector state."""
+    st.markdown(
+        f"""
+        <div style="padding:24px; border:1px dashed {theme.border}; border-radius:6px;
+                    text-align:center; color:{theme.text_muted};">
+            <div style="font-size:12px;">Select a finding to inspect details</div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def _render_diff_tabs(
+    vm: SemanticDiffViewModel,
+    source_sql: str,
+    target_sql: str,
+    theme: ColorTokens,
+) -> None:
+    """Render Semantic / Text diff tab switcher."""
+    tab_sem, tab_txt = st.tabs(["Semantic", "Text"])
+
+    with tab_sem:
+        # Already rendered above — show source/target side by side
+        col_s, col_t = st.columns(2)
+        with col_s:
+            st.markdown(
+                '<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; '
+                'text-transform:uppercase; color:#' + theme.text_muted[1:] + '; margin-bottom:6px;">'
+                'Source</div>',
+                unsafe_allow_html=True,
+            )
+            st.code(source_sql, language="sql")
+        with col_t:
+            st.markdown(
+                '<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; '
+                'text-transform:uppercase; color:#' + theme.text_muted[1:] + '; margin-bottom:6px;">'
+                'Target</div>',
+                unsafe_allow_html=True,
+            )
+            st.code(target_sql, language="sql")
+
+    with tab_txt:
+        import difflib
+        diff_lines = list(
+            difflib.unified_diff(
+                source_sql.splitlines(),
+                target_sql.splitlines(),
+                fromfile=f"Source ({esc(vm.source_dialect)})",
+                tofile=f"Target ({esc(vm.target_dialect)})",
+                lineterm="",
+            )
+        )
+        if diff_lines:
+            diff_text = "\n".join(diff_lines)
+            st.code(diff_text, language="diff")
+        else:
+            st.success("No textual differences found.")

frontend/ui/editor.py

@@ -0,0 +1,102 @@
+"""SQL editor component for SQL Dialect Master v2.
+
+Provides a styled text area with monospace font, line-number-friendly
+layout, and consistent styling across the application.
+"""
+from __future__ import annotations
+
+import streamlit as st
+
+from frontend.core.design_tokens import ColorTokens
+from frontend.core.escaping import esc
+
+
+def render_sql_editor(
+    key: str,
+    label: str,
+    value: str = "",
+    height: int = 240,
+    dialect_key: str | None = None,
+    placeholder: str = "Enter SQL query...",
+    theme: ColorTokens | None = None,
+    disabled: bool = False,
+) -> str:
+    """Render a styled SQL editor text area.
+
+    Args:
+        key: Streamlit widget key
+        label: Display label above the editor
+        value: Initial SQL text
+        height: Editor height in pixels
+        dialect_key: Optional key for dialect selector (shown alongside label)
+        placeholder: Placeholder text
+        theme: Current theme tokens (uses DARK default if None)
+        disabled: Whether the editor is read-only
+
+    Returns:
+        The SQL text entered by the user (read from session state)
+    """
+    if theme is None:
+        from frontend.core.design_tokens import DARK
+        theme = DARK
+
+    # Build label HTML
+    label_html = f'<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; ' \
+                 f'text-transform:uppercase; color:{theme.text_muted}; margin-bottom:6px;">' \
+                 f'{esc(label)}</div>'
+
+    # Dialect badge (if provided)
+    dialect_badge = ""
+    if dialect_key and dialect_key in st.session_state:
+        dialect_val = esc(str(st.session_state[dialect_key]))
+        dialect_badge = (
+            f'<span style="font-family:monospace; font-size:11px; color:{theme.accent}; '
+            f'background:{theme.selected_bg}; padding:2px 6px; border-radius:3px; '
+            f'border:1px solid {theme.border}; margin-left:8px;">{dialect_val}</span>'
+        )
+
+    st.markdown(f"{label_html}{dialect_badge}")
+
+    sql = st.text_area(
+        key=key,
+        value=value,
+        height=height,
+        placeholder=placeholder,
+        label_visibility="collapsed",
+        disabled=disabled,
+        horizontal=True,
+    )
+
+    return sql
+
+
+def render_code_display(sql: str, language: str = "sql", theme: ColorTokens | None = None) -> None:
+    """Render SQL code in a styled code block.
+
+    Args:
+        sql: SQL text to display
+        language: Syntax highlighting language
+        theme: Current theme tokens
+    """
+    if theme is None:
+        from frontend.core.design_tokens import DARK
+        theme = DARK
+
+    st.markdown(
+        f"""
+        <div style="border:1px solid {theme.border}; border-radius:6px; overflow:hidden;
+                    background:{theme.input_bg};">
+            <div style="display:flex; align-items:center; justify-content:space-between;
+                        padding:6px 10px; background:{theme.surface}; border-bottom:1px solid {theme.border};
+                        font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
+                        color:{theme.text_muted};">
+                <span>SQL</span>
+                <span style="font-family:monospace; color:{theme.accent};">{esc(language)}</span>
+            </div>
+            <pre style="margin:0; padding:12px; background:{theme.input_bg};
+                        color:{theme.text_primary}; font-family:monospace; font-size:13px;
+                        line-height:1.6; white-space:pre; overflow:auto;">{esc(sql)}</pre>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )

frontend/ui/status.py

@@ -0,0 +1,255 @@
+"""Status and result display components for SQL Dialect Master v2."""
+from __future__ import annotations
+
+import streamlit as st
+
+from frontend.app_context_v2 import copy_sql
+from frontend.core.design_tokens import ColorTokens
+from frontend.core.escaping import esc
+
+
+def render_conversion_status(
+    status: str,
+    label: str,
+    detail: str | None = None,
+    theme: ColorTokens | None = None,
+) -> None:
+    """Render a single status indicator row.
+
+    Args:
+        status: One of 'valid', 'warning', 'error', 'info', 'neutral'
+        label: Status label text
+        detail: Optional detail text
+        theme: Current theme tokens
+    """
+    if theme is None:
+        from frontend.core.design_tokens import DARK
+        theme = DARK
+
+    colors = {
+        "valid": theme.success,
+        "warning": theme.warning,
+        "error": theme.danger,
+        "info": theme.info,
+        "neutral": theme.text_muted,
+    }
+    dots = {"valid": "●", "warning": "●", "error": "●", "info": "●", "neutral": "●"}
+    dot_color = colors.get(status, theme.text_muted)
+    dot = dots.get(status, "●")
+
+    detail_html = f'<span style="color:{theme.text_secondary}; font-size:12px;"> — {esc(detail)}</span>' if detail else ""
+
+    st.markdown(
+        f"""
+        <div style="display:flex; align-items:center; gap:8px; padding:6px 0;">
+            <span style="color:{dot_color}; font-size:10px;">{dot}</span>
+            <span style="font-size:12px; color:{theme.text_primary};">{esc(label)}</span>
+            {detail_html}
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def render_result_panel(
+    sql: str,
+    source_dialect: str,
+    target_dialect: str,
+    warnings: list[str],
+    transformations: list[str],
+    compatibility_notes: list[str],
+    error_message: str | None,
+    semantic_label: str,
+    semantic_status: str,
+    theme: ColorTokens | None = None,
+    target_validation_state: str = "target_valid",
+) -> None:
+    """Render the full conversion result panel.
+
+    Args:
+        sql: Converted SQL
+        source_dialect: Source dialect name
+        target_dialect: Target dialect name
+        warnings: List of warning strings
+        transformations: List of transformation descriptions
+        compatibility_notes: List of compatibility notes
+        error_message: Error message if conversion failed
+        semantic_label: Semantic status label (e.g. "Equivalent")
+        semantic_status: Semantic status key for color
+        theme: Current theme tokens
+    """
+    if theme is None:
+        from frontend.core.design_tokens import DARK
+        theme = DARK
+
+    # Status badge
+    status_colors = {
+        "valid": (theme.success, f"background:{theme.success}15; color:{theme.success}; border-color:{theme.success}40;"),
+        "error": (theme.danger, f"background:{theme.danger}15; color:{theme.danger}; border-color:{theme.danger}40;"),
+        "warning": (theme.warning, f"background:{theme.warning}15; color:{theme.warning}; border-color:{theme.warning}40;"),
+    }
+    badge_style = status_colors.get(semantic_status, (theme.text_muted, f"background:{theme.hover_bg}; color:{theme.text_muted}; border-color:{theme.border};"))[1]
+    badge_text = esc(semantic_label) if semantic_status != "pending" else "Pending"
+
+    if error_message:
+        # Error state
+        st.markdown(
+            f"""
+            <div style="padding:12px 14px; background:{theme.danger}12; border:1px solid {theme.danger}40;
+                        border-radius:6px; margin-bottom:16px;">
+                <div style="font-size:12px; font-weight:600; color:{theme.danger}; margin-bottom:4px;">
+                    Conversion Failed
+                </div>
+                <div style="font-size:12px; color:{theme.text_secondary};">{esc(error_message)}</div>
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+        return
+
+    # Success state with result panel
+    st.markdown(
+        f"""
+        <div style="display:flex; align-items:center; justify-content:space-between;
+                    margin-bottom:12px;">
+            <div style="font-size:12px; font-weight:600; letter-spacing:0.06em;
+                        text-transform:uppercase; color:{theme.text_muted};">
+                Conversion Result
+            </div>
+            <span style="font-size:11px; font-weight:600; padding:3px 8px; border-radius:4px;
+                         border:1px solid {theme.border}; {badge_style};">
+                {badge_text}
+            </span>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    # SQL output
+    st.code(sql, language="sql")
+
+    # Action buttons
+    col_copy, col_dl, col_diff = st.columns([1, 1, 1])
+    with col_copy:
+        copy_sql(sql, key=_stable_copy_key(sql))
+    with col_dl:
+        st.download_button(
+            "Download",
+            sql,
+            "converted.sql",
+            mime="text/sql",
+            key="download_result_panel",
+        )
+    with col_diff:
+        if st.button("Semantic Diff", key="to_diff_btn"):
+            from frontend.core.navigation import create_navigation_intent
+            intent = create_navigation_intent(
+                target_page="diff",
+                action="open_diff",
+                source=sql,
+                target=sql,
+                src_dialect=source_dialect,
+                tgt_dialect=target_dialect,
+            )
+            st.session_state.sdm_navigation_intent = intent
+            st.rerun()
+
+    # Transformations
+    if transformations:
+        st.markdown(
+            f'<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; '
+            f'text-transform:uppercase; color:{theme.text_muted}; margin:16px 0 8px;">'
+            f'Transformations</div>',
+            unsafe_allow_html=True,
+        )
+        for t in transformations:
+            st.caption(f"→ {esc(t)}")
+
+    # Warnings
+    if warnings:
+        st.markdown(
+            f'<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; '
+            f'text-transform:uppercase; color:{theme.text_muted}; margin:16px 0 8px;">'
+            f'Warnings ({len(warnings)})</div>',
+            unsafe_allow_html=True,
+        )
+        for w in warnings:
+            st.warning(esc(w))
+
+    # Compatibility notes
+    if compatibility_notes:
+        st.markdown(
+            f'<div style="font-size:11px; font-weight:600; letter-spacing:0.06em; '
+            f'text-transform:uppercase; color:{theme.text_muted}; margin:16px 0 8px;">'
+            f'Compatibility Notes</div>',
+            unsafe_allow_html=True,
+        )
+        for note in compatibility_notes:
+            st.info(esc(note))
+
+    # Target-dialect validation state: a generic-only fallback must be
+    # visibly distinguished from a target-validated conversion.
+    if target_validation_state == "generic_only":
+        st.warning(
+            "Output was not accepted by the target-dialect parser and is "
+            "retained via generic-parser fallback. Verify it against the "
+            "target database before relying on it.",
+        )
+
+
+def _stable_copy_key(sql: str) -> str:
+    """Process-independent copy-button key (str.hash is salted)."""
+    import hashlib
+
+    return f"copy_result_{hashlib.sha1(sql.encode('utf-8')).hexdigest()[:8]}"
+
+
+def render_batch_result(
+    total: int,
+    succeeded: int,
+    failed: int,
+    items: list,
+    theme: ColorTokens | None = None,
+) -> None:
+    """Render batch conversion results.
+
+    Args:
+        total: Total statements processed
+        succeeded: Number of successful conversions
+        failed: Number of failed conversions
+        items: List of BatchResultItem view models
+        theme: Current theme tokens
+    """
+    if theme is None:
+        from frontend.core.design_tokens import DARK
+        theme = DARK
+
+    rate = succeeded / total if total else 0
+
+    st.markdown(
+        f"""
+        <div style="display:flex; align-items:center; gap:16px; margin-bottom:12px;">
+            <span style="font-size:13px; font-weight:500; color:{theme.text_primary};">
+                {succeeded}/{total} statements converted
+            </span>
+            <div style="flex:1; height:4px; background:{theme.border}; border-radius:2px; overflow:hidden;">
+                <div style="width:{rate*100}%; height:100%; background:{theme.success}; border-radius:2px;"></div>
+            </div>
+            {f'<span style="font-size:12px; color:{theme.danger};">{failed} failed</span>' if failed else ''}
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    for item in items:
+        if item.success:
+            with st.expander(f"Statement {item.statement_index} ✓", expanded=False):
+                st.code(item.converted_sql or "", language="sql")
+                if item.warnings:
+                    for w in item.warnings:
+                        st.caption(f"⚠ {esc(w)}")
+        else:
+            with st.expander(f"Statement {item.statement_index} ✗ Error", expanded=False):
+                st.error(f"Error: {esc(item.error or 'Unknown error')}")
+                st.caption("Original:")
+                st.code(item.original_sql, language="sql")