Blending Room

Blend AI-casked knowledge with human judgment.

한국어

 Explore          Filter           Select           Edit
 ──────           ──────           ──────           ──────
 [ Graph ] ──→ [ Narrow ] ──→ [ Inspect ] ──→ [ Blend ]

Blending Room is a web dashboard for the Distillery knowledge graph. Like whisky blending, humans combine and refine the raw material — knowledge nodes and relationships — that AI has casked, using their own senses and judgment.

Browse the graph visually, filter by relationship type, inspect node details, and edit edges and content. Every human edit is recorded as source: 'human'.

The Interface

Graph Canvas

The main view renders the knowledge graph with Cytoscape.js. Nodes and edges are laid out using the cola force-directed algorithm.

Edge Styles

Side Panel

Filter by relationship type or source, view node/edge details, and edit content — all without leaving the graph view.

Tech Stack

Frontend   Svelte 5 (runes) · SvelteKit · TypeScript
Graph      Cytoscape.js · cytoscape-cola
Styling    Tailwind CSS 4 · DaisyUI 5
Backend    Elysia server (separate project, proxied via Vite)
Runtime    Bun

Getting Started

Prerequisites

• Bun (or Node.js)
• Distillery server running

Install

bun install

cp .env.example .env
# Edit .env and set VITE_API_URL (default: http://localhost:8710)

Environment Variables

Develop

bun run dev

Build

bun run build
bun run preview

Type Check

bun run check

Self-Hosting

Blending Room is a SvelteKit app. You can deploy it as a Node.js server or as static files behind any web server.

Option 1: Node.js Server

Switch from adapter-auto to adapter-node:

bun add -d @sveltejs/adapter-node

Update svelte.config.js:

import adapter from '@sveltejs/adapter-node';

const config = {
  kit: {
    adapter: adapter()
  }
};

export default config;

Build and run:

bun run build

# The output is in the build/ directory
VITE_API_URL=https://your-api.example.com node build

The server listens on port 8711 by default. Set the PORT environment variable to change it.

Option 2: Static Site

If you don't need SSR, switch to adapter-static:

bun add -d @sveltejs/adapter-static

Update svelte.config.js:

import adapter from '@sveltejs/adapter-static';

const config = {
  kit: {
    adapter: adapter({ fallback: 'index.html' })
  }
};

export default config;

Build and serve with any web server (nginx, caddy, etc.):

bun run build

# The output is in the build/ directory
# Serve with your preferred web server

Reverse Proxy

When running behind a reverse proxy, make sure to:

1. Set VITE_API_URL to your backend's public URL at build time (it's baked into the client bundle)
2. Proxy API requests or configure CORS on the Elysia backend

server {
    listen 80;
    server_name blending.example.com;

    location / {
        proxy_pass http://localhost:8711;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

API Endpoints

Project Structure

src/
├── routes/             # SvelteKit pages
├── lib/
│   ├── components/     # Svelte components (GraphCanvas, SidePanel, TopBar, ...)
│   ├── graph/          # Cytoscape config, styles, events, context menu
│   ├── stores/         # Svelte 5 runes stores (graph, ui, search, auth, toast)
│   ├── api/            # Fetch wrapper + endpoint modules (graph, node, edge, search)
│   ├── types/          # TypeScript type definitions
│   ├── mock/           # Mock data for development
│   └── utils/          # Utilities (edge-id, debounce)

License

MIT

_{pitch black, amber-lit.}