WIP: refactor vedana-backoffice into jims-backoffice

apps/vedana/migrations/env.py

@@ -1,7 +1,6 @@
 from logging.config import fileConfig
 
 import jims_core.db
-import vedana_core.db
 from alembic import context
 import vedana_etl.app
 
@@ -60,7 +59,7 @@ def run_migrations_online() -> None:
     and associate a connection with the context.
 
     """
-    connectable = vedana_core.db.get_db_engine()
+    connectable = jims_core.db.get_db_engine()
 
     with connectable.connect() as connection:
         context.configure(connection=connection, target_metadata=target_metadata)

libs/jims-backoffice/README.md

@@ -1,3 +0,0 @@
-# JIMS UI
-
-Simple FastUI viewer of JIMS threads

libs/jims-backoffice/pyproject.toml

@@ -1,36 +1,31 @@
 [project]
 name = "jims-backoffice"
 dynamic = ["version"]
-description = "Add your description here"
+description = "Reflex-based admin/backoffice UI for JIMS apps"
 readme = "README.md"
 requires-python = ">=3.12"
 authors = [
-    { name = "Andrey Tatarinov", email = "a@tatarinov.co" },
+    { name = "Timur Sheydaev", email = "tsheyd@epoch8.co" },
 ]
 
 dependencies = [
-    "fastapi>=0.115.0",
-    "fastui>=0.7.0",
-    "pydantic-settings>=2.10.1",
-    "sqlalchemy>=2.0.41",
-    "psycopg2-binary>=2.9.10",
-    "uvicorn>=0.29.0",
-    "pydantic==2.9.2",
-    "jims-core>=0.5.1",
-    "python-multipart>=0.0.18",
-    "asyncpg>=0.31.0",
+    "reflex>=0.8.27,<0.9.0",
+    "orjson>=3.11.3",
+    "jims-core",
 ]
 
-[dependency-groups]
-dev = [
-    "mypy>=1.19.0",
-    "pytest>=8.4.1",
-    "ruff>=0.14.10",
-    "types-pyyaml>=6.0.12.20250822",
+[project.scripts]
+jims-backoffice-with-caddy = "jims_backoffice.start_services:main"
+
+[tool.uv.build.wheel]
+packages = ["jims_backoffice"]
+
+include = [
+  { path = "jims_backoffice/Caddyfile" }
 ]
 
-[project.scripts]
-jims-backoffice = "jims_backoffice.app:main"
+[tool.uv.sources]
+jims-core = { workspace = true }
 
 [build-system]
 requires = ["hatchling", "uv-dynamic-versioning"]
@@ -45,6 +40,21 @@ vcs = "git"
 pattern = "default-unprefixed"
 pattern-prefix = "jims-"
 
+[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"]

libs/jims-backoffice/rxconfig.py

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

libs/jims-backoffice/src/jims_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
+}

libs/jims-backoffice/src/jims_backoffice/components/ui_chat.py

@@ -0,0 +1,162 @@
+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
+      - show_details
+      - has_logs, logs_str (optional)
+      - generic_meta, event_data_str (optional)
+      - tag_label (optional badge)
+    """
+
+    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"}},
+                    ),
+                    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(
+        generic_details_block,
+        logs_block,
+        spacing="2",
+        width="100%",
+    )
+
+    tags_box = corner_tags_component or rx.box()
+
+    header_left = rx.hstack(
+        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_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"),
+        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%",
+            "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",
+        ),
+    )

libs/jims-backoffice/src/jims_backoffice/jims_backoffice.py

@@ -0,0 +1,12 @@
+import reflex as rx
+
+from jims_backoffice.pages.chat import page as chat_page
+from jims_backoffice.pages.eval import page as eval_page
+from jims_backoffice.pages.jims import ThreadListState, jims_thread_list_page
+from jims_backoffice.states.chat import ChatState
+from jims_backoffice.states.eval import EvalState
+
+app = rx.App(stylesheets=["/styles.css"])
+app.add_page(chat_page, route="/chat", title="Chat", on_load=ChatState.reset_session)
+app.add_page(jims_thread_list_page, route="/jims", title="JIMS", on_load=ThreadListState.get_data)
+app.add_page(eval_page, route="/eval", title="Evaluation", on_load=EvalState.mount)