vedana-backoffice 0.1.0__tar.gz

vedana_backoffice-0.1.0/.gitignore

@@ -0,0 +1,6 @@
+*.py[cod]
+__pycache__/
+assets/external/
+.states
+.web
+*.db

vedana_backoffice-0.1.0/CHANGELOG.md

@@ -0,0 +1,31 @@
+# 0.4.0
+
+* Splitting ETL pipelines into tabs by new pipeline label
+* Improve data views: server-side pagination, custom styling
+* Add stats to ETL step / data table cards - last run time, row changes, row counts
+* Improve ETL Graph rendering logic
+* Refactor backoffice state.py - split into smaller states per-page
+* Improve pipeline details view in assistant messages
+* Add pipeline logs to assistant message details on Chat page
+* New pipeline tests/evaluation page: view golden dataset, run tests, compare results
+* add LLM model selection to chat page - integration via openrouter
+
+# 0.3.0 - 2025.11.20
+
+* ETL - added monitoring dashboard on the main page
+* General - UI improvements: layouts, tags filtering in JIMS thread viewer
+* Chat - added total chat cost counter
+* ETL - added row count and last run changes in DataTable view
+
+* Add link to Telegram bot if `TELEGRAM_BOT_TOKEN` env is provided
+
+# 0.2.0 - 2025.10.29
+
+* JIMS thread viewer - add feedback processing flow, UI updates
+
+# 0.1.0
+
+Initial commit:
+* ETL page - view and select steps / data tables and run Datapipe pipelines
+* Chat page - basic chat UI
+* JIMS thread viewer - view previous conversations, add feedback

vedana_backoffice-0.1.0/PKG-INFO

@@ -0,0 +1,10 @@
+Metadata-Version: 2.4
+Name: vedana-backoffice
+Version: 0.1.0
+Summary: Reflex-based admin/backoffice UI for Vedana
+Author-email: Andrey Tatarinov <a@tatarinov.co>, Timur Sheydaev <tsheyd@epoch8.co>
+Requires-Python: >=3.12
+Requires-Dist: orjson>=3.11.3
+Requires-Dist: reflex<0.9.0,>=0.8.25
+Requires-Dist: vedana-core
+Requires-Dist: vedana-etl

vedana_backoffice-0.1.0/assets/styles.css

@@ -0,0 +1,120 @@
+.datatable-surface {
+  /* Width is controlled by inline styles or parent container */
+  display: block;
+}
+
+.datatable-surface .gridjs-container {
+  width: fit-content;
+  min-width: 100%;
+  background-color: var(--gray-2);
+  border: 1px solid var(--gray-5);
+  border-radius: 12px;
+  padding: 0.75rem;
+  color: var(--gray-12);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+}
+
+.datatable-surface .gridjs-wrapper {
+  border-radius: 8px;
+  overflow: visible;
+}
+
+.datatable-surface .gridjs-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: transparent;
+}
+
+.datatable-surface .gridjs-th,
+.datatable-surface .gridjs-td {
+  border-color: var(--gray-5);
+  color: var(--gray-12);
+}
+
+.datatable-surface .gridjs-th {
+  background-color: var(--gray-3);
+  font-weight: 600;
+}
+
+.datatable-surface .gridjs-tr:nth-child(odd) .gridjs-td {
+  background-color: var(--gray-1);
+}
+
+.datatable-surface .gridjs-tr:nth-child(even) .gridjs-td {
+  background-color: var(--gray-2);
+}
+
+.datatable-surface .gridjs-tr:hover .gridjs-td {
+  background-color: var(--accent-3);
+  transition: background-color 0.2s ease-in-out;
+}
+
+.datatable-surface .gridjs-search-input,
+.datatable-surface .gridjs-pagination button {
+  background-color: var(--gray-1);
+  color: var(--gray-12);
+  border: 1px solid var(--gray-5);
+  border-radius: 6px;
+  padding: 0.35rem 0.65rem;
+}
+
+.datatable-surface .gridjs-pagination .gridjs-currentPage {
+  background-color: var(--accent-4);
+  color: var(--accent-12);
+  border-color: transparent;
+}
+
+.datatable-surface .gridjs-footer {
+  background-color: var(--gray-2);
+  border-top: 1px solid var(--gray-5);
+  padding: 0.5rem 0.75rem;
+  color: var(--gray-12);
+  border-radius: 0 0 8px 8px;
+}
+
+.datatable-surface .gridjs-footer .gridjs-pages {
+  gap: 0.25rem;
+}
+
+.datatable-surface .gridjs-footer .gridjs-pagination button {
+  background-color: var(--gray-1);
+  border-color: var(--gray-5);
+  color: var(--gray-12);
+}
+
+.datatable-surface .gridjs-footer .gridjs-pagination button:disabled {
+  background-color: var(--gray-4);
+  color: var(--gray-9);
+  border-color: var(--gray-6);
+}
+
+.datatable-surface .gridjs-footer .gridjs-pagination .gridjs-currentPage {
+  background-color: var(--accent-4);
+  color: var(--accent-12);
+  border-color: transparent;
+}
+
+.datatable-surface .gridjs-th:hover {
+  background-color: var(--gray-4);
+  color: var(--gray-12);
+}
+
+.datatable-surface .gridjs-pagination button:disabled {
+  opacity: 0.6;
+}
+
+.datatable-surface .gridjs-search-input::placeholder {
+  color: var(--gray-10);
+}
+
+.datatable-surface .gridjs-pagination .gridjs-pages button.gridjs-spread {
+  background-color: var(--gray-1) !important;
+  color: var(--gray-12) !important;
+  border-color: var(--gray-5) !important;
+  cursor: default;
+}
+
+.datatable-surface .gridjs-pagination .gridjs-pages button.gridjs-spread:hover {
+  background-color: var(--gray-3) !important;
+  border-color: var(--gray-6) !important;
+}

vedana_backoffice-0.1.0/pyproject.toml

@@ -0,0 +1,61 @@
+[project]
+name = "vedana-backoffice"
+dynamic = ["version"]
+description = "Reflex-based admin/backoffice UI for Vedana"
+readme = "README.md"
+requires-python = ">=3.12"
+authors = [
+    { name = "Andrey Tatarinov", email = "a@tatarinov.co" },
+    { name = "Timur Sheydaev", email = "tsheyd@epoch8.co" },
+]
+
+dependencies = [
+    "reflex>=0.8.25,<0.9.0",
+    "orjson>=3.11.3",
+    "vedana-core",
+    "vedana-etl",
+]
+
+[project.scripts]
+vedana-backoffice-with-caddy = "vedana_backoffice.start_services:main"
+
+[tool.uv.build.wheel]
+packages = ["vedana_backoffice"]
+
+include = [
+  { path = "vedana_backoffice/Caddyfile" }
+]
+
+[build-system]
+requires = ["hatchling", "uv-dynamic-versioning"]
+build-backend = "hatchling.build"
+
+[tool.hatch.version]
+source = "uv-dynamic-versioning"
+
+[tool.uv-dynamic-versioning]
+enable = true
+vcs = "git"
+pattern = "default-unprefixed"
+pattern-prefix = "vedana-"
+
+[tool.mypy]
+plugins = ['pydantic.mypy']
+
+[dependency-groups]
+dev = [
+    "ruff>=0.14.10",
+    "mypy>=1.19.0",
+    "pytest>=8.4.0",
+    "pandas-stubs==2.3.2.250926",
+    "types-requests>=2.32.4.20250913",
+]
+
+[tool.ruff]
+line-length = 120
+
+[tool.uv-workspace-codegen]
+generate = true
+template_type = ["lib", "publish"]
+generate_standard_pytest_step = false
+typechecker = "mypy"

vedana_backoffice-0.1.0/rxconfig.py

@@ -0,0 +1,9 @@
+import reflex
+
+config = reflex.Config(  # type: ignore
+    app_name="vedana_backoffice",
+    plugins=[
+        reflex.plugins.TailwindV3Plugin(),
+        reflex.plugins.sitemap.SitemapPlugin(),
+    ],
+)

vedana_backoffice-0.1.0/src/vedana_backoffice/Caddyfile

@@ -0,0 +1,17 @@
+:9000
+
+encode gzip
+
+@backend_routes path /_event/* /ping /_upload /_upload/*
+handle @backend_routes {
+	reverse_proxy localhost:8000 {
+		header_up Upgrade {http.request.header.upgrade}
+		header_up Connection {http.request.header.connection}
+	}
+}
+
+root * /srv
+route {
+	try_files {path} {path}/ /404.html
+	file_server
+}

vedana_backoffice-0.1.0/src/vedana_backoffice/components/etl_graph.py

@@ -0,0 +1,132 @@
+import reflex as rx
+
+from vedana_backoffice.states.etl import EtlState
+
+
+def _node_card(node: dict) -> rx.Component:
+    is_table = node.get("node_type") == "table"  # step for transform, table for table
+    return rx.card(
+        rx.vstack(
+            rx.hstack(
+                rx.hstack(
+                    rx.cond(
+                        is_table,
+                        rx.box(),
+                        rx.badge(node.get("step_type", ""), color_scheme="indigo", variant="soft"),
+                    ),
+                    spacing="2",
+                ),
+                rx.text(node.get("name", ""), weight="medium"),
+                justify="between",
+                width="100%",
+            ),
+            rx.text(node.get("labels_str", ""), size="1", color="gray"),
+            rx.cond(
+                is_table,
+                rx.hstack(
+                    rx.tooltip(rx.text(node.get("last_run", "—"), size="1", color="gray"), content="last update time"),
+                    rx.hstack(
+                        rx.tooltip(
+                            rx.text(node.get("row_count", "—"), size="1", color="gray", weight="bold"),
+                            content="rows total",
+                        ),
+                        rx.tooltip(
+                            rx.text(node.get("last_add", "—"), size="1", color="green"), content="added during last run"
+                        ),
+                        rx.text("/", size="1", color="gray"),
+                        rx.tooltip(
+                            rx.text(node.get("last_upd", "—"), size="1", color="gray"),
+                            content="updated during last run",
+                        ),
+                        rx.text("/", size="1", color="gray"),
+                        rx.tooltip(
+                            rx.text(node.get("last_rm", "—"), size="1", color="red"), content="deleted during last run"
+                        ),
+                        spacing="1",
+                    ),
+                    width="100%",
+                    justify="between",
+                ),
+                # Step view: show last run time and rows processed
+                rx.cond(
+                    node.get("step_type") != "BatchGenerate",  # BatchGenerate has no meta table
+                    rx.hstack(
+                        rx.tooltip(
+                            rx.text(node.get("last_run", "—"), size="1", color="gray"),
+                            content="last run time (that produced changes)",
+                        ),
+                        rx.hstack(
+                            rx.tooltip(
+                                rx.text(node.get("rows_processed", 0), size="1", color="gray"),
+                                content="rows processed in last run",
+                            ),
+                            rx.text("/", size="1", color="gray"),
+                            rx.tooltip(
+                                rx.text(node.get("total_success", 0), size="1", color="gray", weight="bold"),
+                                content="rows processed total",
+                            ),
+                            rx.cond(
+                                node.get("has_total_failed", False),
+                                rx.tooltip(
+                                    rx.text(node.get("total_failed_str", ""), size="1", color="red"),
+                                    content="total failed rows (all time)",
+                                ),
+                                rx.box(),
+                            ),
+                            spacing="1",
+                        ),
+                        width="100%",
+                        justify="between",
+                    ),
+                    rx.box(),
+                ),
+            ),
+            spacing="2",
+            width="100%",
+        ),
+        padding="0.75em",
+        style={
+            "position": "absolute",
+            "left": node.get("left", "0px"),
+            "top": node.get("top", "0px"),
+            "width": node.get("width", "420px"),
+            "height": "auto",
+            "border": node.get("border_css", "1px solid #e5e7eb"),
+            "overflow": "visible",
+            "boxSizing": "border-box",
+        },
+        variant="surface",
+        on_click=rx.cond(
+            is_table,
+            # no direct return values here and that's ok, handled in state
+            EtlState.preview_table(table_name=node.get("name", "")),  # type: ignore
+            EtlState.toggle_node_selection(index=node.get("index_value")),  # type: ignore
+        ),
+    )
+
+
+def etl_graph() -> rx.Component:
+    svg = rx.box(
+        rx.html(EtlState.graph_svg),
+        style={
+            "position": "absolute",
+            "left": 0,
+            "top": 0,
+            "pointerEvents": "none",
+            "width": "100%",
+            "height": "100%",
+        },
+    )
+
+    nodes_layer = rx.box(
+        rx.foreach(EtlState.graph_nodes, _node_card),
+        style={
+            "position": "absolute",
+            "left": 0,
+            "top": 0,
+            "width": "100%",
+            "height": "100%",
+        },
+    )
+
+    return rx.box(svg, nodes_layer, style={"position": "relative", "width": "100%", "height": "100%"})

vedana_backoffice-0.1.0/src/vedana_backoffice/components/ui_chat.py

@@ -0,0 +1,236 @@
+import reflex as rx
+
+
+def render_message_bubble(
+    msg: dict,
+    on_toggle_details,
+    extras: rx.Component | None = None,
+    corner_tags_component: rx.Component | None = None,
+) -> rx.Component:  # type: ignore[valid-type]
+    """Render a chat-style message bubble.
+
+    Expects msg dict with keys:
+      - content, is_assistant (bool-like), created_at_fmt or created_at
+      - has_tech, has_logs, show_details
+      - has_models, has_vts, has_cypher, models_str, vts_str, cypher_str (optional)
+      - logs_str (optional)
+    """
+
+    tech_block = rx.cond(
+        msg.get("has_tech"),
+        rx.card(
+            rx.vstack(
+                rx.cond(
+                    msg.get("has_models"),
+                    rx.vstack(
+                        rx.text("Models", weight="medium"),
+                        rx.code_block(
+                            msg.get("models_str", ""),
+                            font_size="11px",
+                            language="json",
+                            # (bug in reflex?) code_block does not pass some custom styling (wordBreak, whiteSpace)
+                            # https://github.com/reflex-dev/reflex/issues/6051
+                            code_tag_props={"style": {"whiteSpace": "pre-wrap"}},
+                            style={
+                                "display": "block",
+                                "maxWidth": "100%",
+                                "boxSizing": "border-box",
+                            },
+                        ),
+                        spacing="1",
+                        width="100%",
+                    ),
+                ),
+                rx.cond(
+                    msg.get("has_vts"),
+                    rx.vstack(
+                        rx.text("VTS Queries", weight="medium"),
+                        rx.code_block(
+                            msg.get("vts_str", ""),
+                            font_size="11px",
+                            language="python",
+                            code_tag_props={"style": {"whiteSpace": "pre-wrap"}},
+                            style={
+                                "display": "block",
+                                "maxWidth": "100%",
+                                "boxSizing": "border-box",
+                            },
+                        ),
+                        spacing="1",
+                        width="100%",
+                    ),
+                ),
+                rx.cond(
+                    msg.get("has_cypher"),
+                    rx.vstack(
+                        rx.text("Cypher Queries", weight="medium"),
+                        rx.code_block(
+                            msg.get("cypher_str", ""),
+                            font_size="11px",
+                            language="cypher",
+                            code_tag_props={"style": {"whiteSpace": "pre-wrap"}},
+                            style={
+                                "display": "block",
+                                "maxWidth": "100%",
+                                "boxSizing": "border-box",
+                            },
+                        ),
+                        spacing="1",
+                        width="100%",
+                    ),
+                ),
+                spacing="2",
+                width="100%",
+            ),
+            padding="0.75em",
+            variant="surface",
+        ),
+        rx.box(),
+    )
+
+    generic_details_block = rx.cond(
+        msg.get("generic_meta"),
+        rx.code_block(
+            msg.get("event_data_str", ""),
+            font_size="11px",
+            language="json",
+            code_tag_props={"style": {"whiteSpace": "pre-wrap"}},
+            style={
+                "display": "block",
+                "maxWidth": "100%",
+                "boxSizing": "border-box",
+            },
+        ),
+        rx.box(),
+    )
+
+    logs_block = rx.cond(
+        msg.get("has_logs"),
+        rx.card(
+            rx.vstack(
+                rx.text("Logs", weight="medium"),
+                rx.scroll_area(
+                    rx.code_block(
+                        msg.get("logs_str", ""),
+                        font_size="11px",
+                        language="log",
+                        wrap_long_lines=True,
+                        style={
+                            "display": "block",
+                            "maxWidth": "100%",
+                            "boxSizing": "border-box",
+                        },
+                        code_tag_props={"style": {"whiteSpace": "pre-wrap"}},  # styling workaround
+                    ),
+                    type="always",
+                    scrollbars="vertical",
+                    style={
+                        "maxHeight": "25vh",
+                        "width": "100%",
+                    },
+                ),
+                spacing="1",
+                width="100%",
+            ),
+            padding="0.75em",
+            width="100%",
+            variant="surface",
+        ),
+        rx.box(),
+    )
+
+    details_block = rx.vstack(
+        tech_block,
+        generic_details_block,
+        logs_block,
+        spacing="2",
+        width="100%",
+    )
+
+    # Tag badges for feedback
+    tags_box = corner_tags_component or rx.box()
+
+    header_left = rx.hstack(
+        # event type label at the very left
+        rx.cond(
+            msg.get("tag_label", "") != "",
+            rx.badge(msg.get("tag_label", ""), variant="soft", size="1", color_scheme="gray"),
+            rx.box(),
+        ),
+        rx.cond(
+            msg.get("has_tech") | msg.get("has_logs") | msg.get("generic_meta"),  # type: ignore[operator]
+            rx.button(
+                "Details",
+                variant="ghost",
+                color_scheme="gray",
+                size="1",
+                on_click=on_toggle_details,  # type: ignore[arg-type]
+            ),
+        ),
+        rx.text(msg.get("created_at", ""), size="1", color="gray"),
+        spacing="2",
+        align="center",
+    )
+
+    body = rx.vstack(
+        rx.hstack(header_left, tags_box, justify="between", width="100%", align="center"),  # header
+        rx.text(
+            msg.get("content", ""),
+            style={
+                "whiteSpace": "pre-wrap",
+                "wordBreak": "break-word",
+            },
+        ),
+        rx.cond(msg.get("show_details"), details_block),
+        rx.cond(extras is not None, extras or rx.box()),
+        spacing="2",
+        width="100%",
+        style={
+            "maxWidth": "100%",
+        },
+    )
+
+    assistant_bubble = rx.card(
+        body,
+        padding="0.75em",
+        style={
+            "maxWidth": "70%",  # 35 vw is 70% of 50% parent card width in vw terms
+            "backgroundColor": "#11182714",
+            "border": "1px solid #e5e7eb",
+            "borderRadius": "12px",
+            "wordBreak": "break-word",
+            "overflowX": "hidden",
+        },
+    )
+    user_bubble = rx.card(
+        body,
+        padding="0.75em",
+        style={
+            "maxWidth": "70%",
+            "backgroundColor": "#3b82f614",
+            "border": "1px solid #e5e7eb",
+            "borderRadius": "12px",
+            "wordBreak": "break-word",
+            "overflowX": "hidden",
+        },
+    )
+
+    return rx.cond(
+        msg.get("is_assistant"),
+        rx.hstack(
+            rx.avatar(fallback="A", size="2", radius="full"),
+            assistant_bubble,
+            spacing="2",
+            width="100%",
+            justify="start",
+            align="start",
+        ),
+        rx.hstack(
+            user_bubble,
+            rx.avatar(fallback="U", size="2", radius="full"),
+            spacing="2",
+            width="100%",
+            justify="end",
+            align="start",
+        ),
+    )