Skip to content

Instantly share code, notes, and snippets.

@hall500
Created June 13, 2026 10:23
Show Gist options
  • Select an option

  • Save hall500/b811fa2adfcf5ca16538c9264c3353f3 to your computer and use it in GitHub Desktop.

Select an option

Save hall500/b811fa2adfcf5ca16538c9264c3353f3 to your computer and use it in GitHub Desktop.
Dotted engineering docs

Architecture

Last updated: 2026-06-13
See also: ARCHITECTURE_OVERVIEW.md (AI agent deep-dive), docs/labs/README.md


System Topology

flowchart TD
  subgraph clients [Clients]
    Web["Web Client (Vue 3)"]
    Desktop["Desktop (Electron)"]
    Teams["M365 / Teams"]
  end

  subgraph backend [Backend - AdonisJS]
    API["REST API / Controllers"]
    Mgr["Managers"]
    Svc["Services"]
    Agent["AI Agent Layer"]
    MCP["MCP Service"]
  end

  subgraph data [Data & External]
    DB[("PostgreSQL / PGlite / SQLite")]
    VS["Vector Store (OpenAI / Azure)"]
    Blob["Azure Blob / Drive Providers"]
    LLM["LLM Providers"]
    Ext["SaaS APIs via MCP"]
  end

  subgraph async [Async]
    AF["Azure Functions"]
    SB["Service Bus"]
  end

  Web -->|REST / SSE| API
  Desktop -->|REST + IPC| API
  Teams --> API
  API --> Mgr --> Svc
  API --> Agent
  Agent --> MCP --> Ext
  Svc --> DB
  Svc --> VS
  Svc --> Blob
  Agent --> LLM
  AF --> SB --> API
Loading

Backend Layer Model

AdonisJS follows a consistent layering convention:

Layer Location Responsibility
Routes start/routes.ts HTTP mapping, lazy controller imports
Controllers app/controllers/ Request validation, auth context, HTTP responses
Managers app/managers/ Domain logic, orchestration across models
Services app/services/ Cross-cutting, integrations, AI, storage
Models app/models/ Lucid ORM entities
Providers app/providers/ Boot-time initialization
Validators app/validators/ VineJS request schemas
Config config/ JSON catalogs + TypeScript config modules

Path aliases (from socius_backend/package.json):

#controllers/*  #services/*  #models/*  #managers/*  #labs/*

AI Agent Architecture

Entry point: app/services/ai/agent_service.ts

User prompt
  → AgentService.processAgentRequest()
  → LangChain agent / LangGraph state machine
  → ToolRegistry (50+ tools)
  → Orchestrators (ChatOrchestrator, DocQAOrchestrator, AIOrchestrator)
  → StreamManager (SSE to client)

Tool categories

Category Examples Path
Content content_create, content_read, content_update app/services/ai/agent/tools/content/
Document CRUD Legacy + new content tools tools/
Stakeholder Review, simulation tools/stakeholder/
MCP Per-server LangChain wrappers agent/mcp/MCPToolManager.ts
Skills fetch_skill tools/FetchSkillTool.ts
Vector vectorStoreSearchTool tools/

Orchestrators

Orchestrator Use case
ChatOrchestrator General project chat
DocQAOrchestrator Document Q&A with conversation history
AIOrchestrator Directive / scheduled execution

Prompt composition: PromptComposer, PromptManager


Frontend Architecture

main.ts
  → Vuetify theme (Hypermat)
  → Pinia stores
  → Vue Router (lazy routes + lab routes)
  → App.vue

WorkSpaceLayout
  → Project tree / document viewer / ChatInterface
  → Pinia: projectModule, chatModule, docModule, streamingModule
Area Path Notes
Views src/views/ Page-level routes
Components src/components/ ~254 Vue SFCs, domain-grouped
Composables src/composables/ Shared reactive logic
Store src/store/ 13 Pinia modules
Auth src/auth/ MSAL, M365 SSO
Labs src/labs/ Experimental UI surfaces

Alias: @/src/

Dev proxy: Vite forwards /apilocalhost:3333


Desktop Architecture

Electron shell loads the hosted web client URL. Adds:

Module Path Role
Local MCP src/main/local-mcp.ts Bundled + subprocess + HTTP MCP
OAuth src/main/oauth.ts Desktop token refresh
IPC src/main/ipc.ts Renderer ↔ main bridge
CLI src/main/cli/dotted-mcp.ts Bundled MCP server shell

Local MCP URLs use dotted:// or dotted-local:// schemes proxied through backend.


Data Model (Core Entities)

erDiagram
  User ||--o{ Project : owns
  Tenant ||--o{ Project : scopes
  Project ||--o{ Doc : contains
  Project ||--o{ Stakeholder : has
  Project ||--o{ McpServer : connects
  Project ||--o{ Directive : schedules
  Doc ||--o{ DocHistory : versions
  User ||--o{ Subscription : billing
  Tenant ||--o{ TenantDomain : domains
Loading

Key model files: Project.ts, Doc.ts, Stakeholder.ts, McpServer.ts, Directive.ts, Subscription.ts, Tenant.ts


Document Storage

Documents are file-backed (not primarily in DB body column):

  1. Upload → temp storage
  2. DocManager persists to blob/local storage
  3. MIME type determines viewer (TipTap HTML, Univer spreadsheet, Excalidraw, proto iframe)
  4. Vector store indexes for semantic search
  5. Version history via DocumentVersionService

Conversation history stored as JSON files with INTERMEDIATE lifecycle tag.


MCP Integration Architecture

config/mcp_servers.json (catalog)
  → McpServerCatalog / CatalogRegistry
  → User/tenant MCPServer records (OAuth tokens)
  → McpService (connect, list tools, call)
  → MCPToolManager (LangChain StructuredTool wrappers)
  → Agent tool selection

Built-in MCP server implementations: app/services/mcp_servers/ (Jira, Slack, Gmail, Teams, etc.)

External agents connect via Dotted's hosted MCP connector (rollup + assistant tools at workspace level; project-scoped tokens expose fuller surface).


Labs Isolation

Labs live in app/labs/<slug>/ + src/labs/<slug>/. One door rule:

Lab code → DottedPlatformService (only allowed core import)

ESLint enforces boundary in socius_backend/eslint.config.js. Exception: Azure Function triggers must live in azure_functions/ package.


Deployment & CI

.github/workflows/deploy.yml:

  • Backend: unit, functional, e2e tests; ai_e2e on label
  • Self-hosted deploy to Azure
  • Frontend: Cypress on Chrome

Known Architectural Deviations

Deviation Details Status
Dual UI frameworks Vuetify 3 + PrimeVue 4 coexist Documented in ui-rules
React in Vue app Excalidraw embed requires React Vite alias dedupes instance
Vector store vs direct context NEW_APPROACHES.md proposes replacement Proposal only; vector store still active
Labs Azure Functions Triggers outside lab tree Documented exception
Package naming Backend "hello-world", frontend "socious_web_client" Legacy scaffold typos
Customer content in monorepo customers/gaia/ blueprints Intentional for delivery

Build Plan

Last updated: 2026-06-13
Horizon: Current state + documented proposals through H2 2026

This document consolidates architectural direction and planned work from existing plans, PRDs, and codebase signals.


Strategic Pillars

  1. Living documents — docs as first-class, AI-maintained artifacts (not static files)
  2. Integration fabric — MCP as connective tissue across enterprise SaaS
  3. Stakeholder simulation — virtual reviewers with policy-backed guardrails
  4. Autonomous workflows — scheduled directives with human-in-the-loop controls
  5. Org-scale reporting — Areas + OSTR framework (Dotted Clarity vision in Dotted Overview.md)

Phase 1: Foundation (Complete / Maintaining)

Initiative Status Reference
Core project/doc/stakeholder CRUD ✅ Complete Models + managers
AI agent + tool registry ✅ Complete ARCHITECTURE_OVERVIEW.md
MCP catalog + OAuth connectors ✅ Ongoing expansion HOWTO.add-mcp-server.md
Blueprint / template system ✅ 21 templates templates/
Document versioning ✅ Complete DOCUMENT_VERSIONING.md
Vector store (OpenAI + Azure) ✅ Active Dual-write on projects
Dynamic Stripe plans ✅ Complete DYNAMIC_PLANS_IMPLEMENTATION.md
Compliance / hybrid guardrails ✅ Complete HYBRID_COMPLIANCE_SYSTEM.md
Virtual stakeholders ✅ Complete VIRTUAL_STAKEHOLDERS_README.md
Conversation as document ✅ Implemented PLAN_conversation_as_document.md
Labs architecture ✅ Pattern established docs/labs/README.md
Desktop + local MCP ✅ Complete socius_desktop/
Teams / M365 integration ✅ Complete m365-app/

Phase 2: In Progress / Active Branches

Initiative Status Notes
Team subscription billing 🔄 Feature branch feature/team-subscription-billing — Stripe org checkout, entitlements, member gating
Custom AI providers 🔄 Hotfix branch Custom OpenAI-compatible endpoints, skill import
Org optional skills 🔄 WIP Tenant skills assignable to stakeholders
Meetcute lab 🔄 Experimental First lab; gated by LABS_ENABLED
Mobile dialog improvements 🔄 Documented MOBILE_IMPROVEMENTS.md, UPDATE_MOBILE_DIALOGS.md
Engineering documentation 🔄 This doc set docs/engineering/

Phase 3: Proposed / Not Started

Initiative Source Summary
Direct document context (replace vector store) NEW_APPROACHES.md Include full doc context in LLM prompts instead of vector search
Dotted Clarity (OSTR / Areas) Dotted Overview.md Org-wide automated reporting hierarchy
Token system consolidation Engineering review Merge --vt-c-*, Hypermat hardcoded gradients into Vuetify theme
Frontend ESLint strictness code-standards.md Re-enable unused-var and no-explicit-any
UploadDocumentDialog refactor Code review Extract useSkillContentImport composable
CONTRIBUTING / AGENTS.md Gap Formalize onboarding using engineering doc set

Dotted Clarity Roadmap (Product Vision)

From Dotted Overview.md — org-wide reporting product:

Phase Timeline (planned) Deliverables
Phase 0: Dogfooding Q4 2025 Internal Eng/Product on Clarity
Phase 1: Private Beta Q1 2026 3–5 enterprise customers, Jira + GitHub connectors
Phase 2: GA Q2 2026 Public launch
Phase 3: V2 H2 2026 Salesforce connector, custom tracker fields, alerting

OSTR artifacts per Area: Overview, Status, Tracker, Roadmap

Note: Clarity is a product vision doc; implementation status should be tracked in progress-tracker.md as backend/frontend land.


Technical Build Priorities (Engineering)

Near term

  1. Merge team billing — complete test coverage, resolve PR review items
  2. Finish org skills + custom AI providers — integration tests for new HTTP paths
  3. SSRF hardening — align skill URL import with existing patterns
  4. ChatOrchestrator org skill filter — load only assigned org skill content

Medium term

  1. Component composable extraction — large dialogs (UploadDocumentDialog, UserPreferencesDialog)
  2. UI token consolidation — single token source, remove legacy --vt-c-*
  3. PrimeVue deprecation path — migrate remaining surfaces to Vuetify
  4. Package name cleanup — fix hello-world / socious_web_client typos

Long term

  1. Vector store evaluation — prototype direct-context approach from NEW_APPROACHES.md
  2. Clarity backend — Areas model, ingestion workers, synthesis engine
  3. Labs expansion — second lab following documented pattern
  4. SOC 2 / enterprise hardening — per product vision requirements

Infrastructure & DevOps

Item Plan
CI/CD Maintain .github/workflows/deploy.yml — ai_e2e on demand
Dependabot Active (.github/dependabot.yml)
Azure self-hosted runners Current deploy target
PGlite local dev Default for backend dev
Azure Functions Directive queue; lab triggers when needed

Blueprint / Template Expansion

When adding templates:

  1. Follow TEMPLATE_CREATION_GUIDE.md
  2. Add manifest to socius_backend/templates/<slug>/
  3. Register in catalog if user-facing
  4. Include preload docs + stakeholder definitions
  5. Test instantiation via wizard E2E

Planned template categories (from existing catalog gaps):

  • Engineering runbooks
  • Security review packs
  • Customer success playbooks

Decision Log

Date Decision Rationale
2025 Conversation as JSON docs, no versioning Living chat history; simpler than version chain
2025 Labs via DottedPlatformService only Prevent core leakage
2025 Dynamic plans from Stripe only No hardcoded plan tiers
2026 Team billing config-driven exemptions billing.json not DB flags
2026 Engineering docs in docs/engineering/ Canonical 9-doc set for agents + engineers
TBD Vector store replacement Pending prototype results

Dependencies & Risks

Risk Mitigation
Dual UI framework complexity Vuetify-first policy for new work
Large component files Composable extraction on touch
MCP OAuth fragility Catalog + provider abstraction; HOWTO docs
AI E2E cost/flakiness Label-gated CI (AI validation needed)
Clarity scope creep Phase gates per OSTR MVP definition

Code Standards

Last updated: 2026-06-13


Formatting

Shared Prettier config at repository root (.prettierrc):

Rule Value
Semicolons false
Quotes Single
Tab width 2
Trailing comma None
Print width 100

Backend additionally extends @adonisjs/prettier-config.

Enforcement: Husky + lint-staged on staged files (root package.json).


TypeScript

Package Config Strictness
Frontend socius_web_client/tsconfig.json strict: true, noUnusedLocals, noUnusedParameters
Backend socius_backend/tsconfig.json Adonis defaults, decorators enabled
Desktop socius_desktop/tsconfig.json Standard

ESLint

Frontend (socius_web_client/eslint.config.js)

Flat config with @eslint/js, typescript-eslint, eslint-plugin-vue, Prettier.

Intentionally relaxed rules (marked temporary in config):

  • no-unused-vars, @typescript-eslint/no-unused-vars — off
  • @typescript-eslint/no-explicit-any — off
  • vue/multi-word-component-names — off

Deviation: TypeScript compiler is stricter than ESLint. Unused vars and any may pass lint but fail tsc.

Backend (socius_backend/eslint.config.js)

Uses @adonisjs/eslint-config with these overrides:

  • @typescript-eslint/naming-convention — off
  • @unicorn/filename-case — off
  • @typescript-eslint/no-explicit-any — off

Labs boundary rule (enforced):

// app/labs/** may NOT import:
// #models/*, #controllers/*, #middleware/*, #managers/*, #services/ai/*
// Exception: Tool base interface for defining lab AI tools

Labs must consume core via #services/platform/dotted_platform_service.


Backend Conventions

Naming & structure

Artifact Convention Example
Controllers {domain}_controller.ts, default export class doc_controller.ts
Managers {domain}_manager.ts doc_manager.ts
Services {name}_service.ts or nested dirs conversation_history_service.ts
Models PascalCase class, snake_case DB columns Doc, user_id
Routes Lazy dynamic imports () => import('#controllers/doc_controller')

Dependency injection

Use @inject() on controllers and services. Resolve via Adonis container.

Validation

VineJS validators in app/validators/. Controllers use request.only() or validated schemas.

Error handling

Typed exceptions for domain errors (e.g. team_billing_required_exception). Global handler in app/exceptions/handler.ts.

Database

Lucid ORM. Migrations in database/migrations/. Supports sqlite, pglite, postgresql via config/database.ts.

Config catalogs

JSON catalogs in config/*.json are single source of truth for MCP servers, AI models, skills, OAuth providers, stakeholder templates. TypeScript modules in config/*.ts add runtime helpers.


Frontend Conventions

Vue SFC pattern

Dominant pattern: Composition API with <script setup lang="ts">.

State management

Layer Use when
Pinia store Cross-component persisted state (project, chat, tenant)
Composable Reusable logic without global state
Local ref/computed Component-scoped UI state

HTTP

Axios with interceptors for auth, correlation IDs, desktop token refresh.

Routing

Lazy-loaded route components. Lab routes registered dynamically from src/labs/index.ts.

Imports

Use @/ alias for src/. Prefer existing composables and stores over duplicating logic.


AI Tool Conventions

All agent tools implement Tool interface:

app/services/ai/agent/tools/base/Tool.interface.ts

Requirements:

  • Zod schema for arguments
  • ToolContext for user, project, stream manager
  • Register in ToolRegistry.ts by category
  • Use content_create / content_read / content_update for new content (prefer skills for complex authoring)

Testing

Type Location Runner
Unit socius_backend/tests/unit/ Japa
E2E socius_backend/tests/e2e/ Japa + HTTP client
AI E2E socius_backend/tests/ai_e2e/ Japa (conditional CI)
Frontend E2E socius_web_client/cypress/e2e/ Cypress
Frontend component socius_web_client/cypress/component/ Cypress

Root scripts: npm run test, npm run test:backend, npm run test:frontend


Git & PR Conventions

  • Feature branches off main
  • CI runs on push and PR
  • AI validation label triggers ai_e2e suite
  • No CONTRIBUTING.md or AGENTS.md exists yet — this doc set fills that gap

Documented Deviations from Ideal Standards

Area Ideal Actual Recommendation
Frontend ESLint strictness Strict unused-var / no-any Relaxed for velocity Re-enable incrementally
Component naming Multi-word required Single-word allowed Accept for legacy; use multi-word for new
UI framework Single design system Vuetify + PrimeVue Use Vuetify for new work
God components < 500 lines UploadDocumentDialog.vue ~2800 lines Extract composables when touching
Package names Match product hello-world, socious_web_client Cosmetic fix when convenient
Developer onboarding CONTRIBUTING.md Scattered READMEs Use docs/engineering/ set

Comments

Code should be self-explanatory. Add comments only for:

  • Non-obvious business rules
  • Security boundaries (labs, SSRF guards)
  • Workarounds with linked issues

Do not add narrating comments ("// import module").

Library Documentation

Last updated: 2026-06-13

Reference for shared libraries, backend services, MCP infrastructure, and key third-party dependencies.


Backend Core

Framework

Library Version area Usage
@adonisjs/core 6.x HTTP server, DI, config
@adonisjs/lucid ORM, migrations
@vinejs/vine Request validation
luxon DateTime (models use @column.dateTime)

AI / LangChain

Module Path Purpose
AIServiceManager app/services/ai/AIServiceManager.ts Multi-provider routing, fallback
CapabilityRouter app/services/ai/CapabilityRouter.ts Route by capability type
Providers app/services/ai/providers/ OpenAI, Anthropic, Gemini, Moonshot
AgentService app/services/ai/agent_service.ts Agent request entry
ToolRegistry app/services/ai/agent/tools/ToolRegistry.ts Tool registration
MCPToolManager app/services/ai/agent/mcp/MCPToolManager.ts MCP → LangChain tools
PromptComposer app/services/ai/agent/ai/PromptComposer.ts System prompt assembly
ChatOrchestrator app/services/ai/agent/ai/ChatOrchestrator.ts Chat flow
DocQAOrchestrator app/services/ai/agent/ai/DocQAOrchestrator.ts Doc Q&A + conversation

Packages: @langchain/core, @langchain/openai, @langchain/anthropic, @langchain/langgraph

Config: config/ai.ts, config/aimodels.json

Content tools

Tool Purpose
content_create Create document, proto, spreadsheet, drawing, plaintext
content_read Read document content
content_update Update existing content
fetch_skill Load platform/org/user skill instructions

Skills defined in config/skills_catalog.json + XML instruction files in config/skills/.

Vector store

Component Path
VectorStoreManager managers layer
Azure provider app/services/vector_store/providers/AzureVectorStoreProvider.ts
OpenAI provider app/services/vector_store/providers/OpenAIVectorStoreProvider.ts

Projects store store_id, vector_store_provider, vector_stores[] (dual-write support).

MCP (Model Context Protocol)

Component Path
Catalog config/mcp_servers.json
McpServerCatalog app/services/mcp_server_catalog.ts
CatalogRegistry app/services/catalog_registry.ts
McpService app/services/mcp_service.ts
Server implementations app/services/mcp_servers/*.ts

HOWTO: HOWTO.add-mcp-server.md

Built-in servers include: Jira, Slack, Trello, Zendesk, Gmail, Outlook, SharePoint, Planner, Azure DevOps, Basecamp, Mural, ClickUp, Google Analytics, Teams.

SDK: @modelcontextprotocol/sdk v1.26+

Storage providers

app/services/storage/providers/:

  • OneDrive, Google Drive, GitHub, Confluence, Notion, Basecamp, Mural, SharePoint, local, web, dotted

OAuth: config/oauth_providers.json, HOWTO.add-oauth-provider.md

Billing

Service Purpose
DynamicPlanService Stripe plan cache + limits
SubscriptionService User/tenant subscriptions
TeamBillingService Org-level Stripe billing (feature branch)
Stripe provider app/services/subscription_providers/stripe.provider.ts

Doc: DYNAMIC_PLANS_IMPLEMENTATION.md

Platform (Labs API)

DottedPlatformServiceapp/services/platform/dotted_platform_service.ts

Only approved entry point for lab code to access projects, blueprints, stakeholders, agent prompts.

Doc conversion

Flask + Pandoc service at socius_backend/doc_converter/. Auto-started by DocConverterProvider.


Frontend Core

Framework

Library Usage
vue 3.x Composition API SFCs
vue-router 4 SPA routing
pinia + pinia-plugin-persistedstate State
vuetify 3 Primary UI
primevue 4 Secondary UI (limited)
axios HTTP client

Editors & viewers

Library Usage
@tiptap/* Rich text (doc-viewer)
@univerjs/* Spreadsheets
@excalidraw/excalidraw Diagrams (via React)
@vue-office/* Office doc preview
pdfjs-dist PDF viewing
mermaid Diagram rendering in docs

Auth & Microsoft

Library Usage
@azure/msal-browser Azure AD auth
@microsoft/teams-js Teams host integration

Charts

Library Usage
vue3-apexcharts Dashboard charts
chart.js Secondary charting

Desktop

Module Library Purpose
Electron electron Shell
MCP SDK @modelcontextprotocol/sdk Local MCP transport
Build electron-vite, electron-builder Packaging (win/mac/msix)

Local MCP manager: src/main/local-mcp.ts
CLI shell: src/main/cli/dotted-mcp.ts


Config Catalogs (JSON)

File Contents
config/mcp_servers.json MCP server definitions
config/oauth_providers.json OAuth provider configs
config/aimodels.json AI model metadata
config/skills_catalog.json Platform skills
config/stakeholder_templates.json Default stakeholder personas
config/integration_metadata.json Integration UI metadata
config/billing.json Billing exemptions (team billing)
config/verified_domains.json Domain → tenant mapping

TypeScript helpers co-located: config/billing.ts, config/ai.ts, etc.


Project Templates (Blueprints)

21 core templates in socius_backend/templates/:

Slug Purpose
getting-started Onboarding
quick-start Fast start
auto-status Status slide rollup
auto-prd PRD generation
executive-summary Executive summary
executive-assistant EA setup
analytics-planning Measurement plan
product-discovery PRD + personas
marketing-rollup Marketing rollup
project-atlas Integration mini-app
risk-register Risk tracker
task-tracker Task JSON tracker
sprint-tracker-dashboard Sprint dashboard
user-metrics-dashboard Metrics dashboard
release-notes Release notes
email-newsletter Newsletter
monthly-investor-update Investor update
agent-status Agent status report
stakeholder-collaboration Stakeholder workflows
custom-rollup Custom rollup
ai-proxy AI proxy template

Authoring guide: templates/TEMPLATE_CREATION_GUIDE.md


Azure Functions

Package: socius_backend/azure_functions/

  • Directive queue processing via Service Bus
  • Lab triggers (when needed) live here per labs README exception

External Agent Integration (Dotted MCP Connector)

Hosted MCP connector (user-Dotted) exposes:

Tool Purpose
dotted_create_rollup Create rollup from template
dotted_create_ai_assistant Create executive assistant
dotted_list_projects List projects
dotted_list_rollup_templates Template catalog
dotted_list_connectable_integrations Integration slugs
dotted_share_rollup Share completed rollup

Project-scoped MCP tokens expose fuller project tool surface (document CRUD, etc.) — mint from Dotted Settings.


Testing Libraries

Package Usage
@japa/runner Backend tests
cypress Frontend E2E + component
playwright Backend browser automation (CUA)

Notable Deviations

Item Notes
React in Vue Required for Excalidraw; Vite dedupes React instance
Backend package name hello-world Adonis scaffold leftover
PrimeVue alongside Vuetify Do not add new PrimeVue surfaces
pptxjs vendored lib ESLint ignored at src/lib/pptxjs/**

Progress Tracker

Last updated: 2026-06-13
Legend: ✅ Done · 🔄 In progress · 📋 Planned · ⚠️ At risk · ❌ Blocked


Platform Core

Feature Status Evidence Notes
Projects CRUD project_controller.ts, Project.ts Multi-tenant aware
Documents CRUD + viewers doc_controller.ts, doc-viewer components HTML, DOCX, spreadsheet, proto, drawing
Stakeholders + review stakeholder_controller.ts, VIRTUAL_STAKEHOLDERS_README.md Persona + body doc architecture
Directives / scheduling Directive model, Azure Functions queue RRULE + cron
AI agent + tools agent_service.ts, ToolRegistry.ts 50+ tools
MCP integrations mcp_servers.json, 15+ server impls Ongoing catalog growth
Blueprint wizard 21 templates, TemplateWizard.vue
Vector store search VectorStoreManager Dual OpenAI/Azure
Document versioning DOCUMENT_VERSIONING.md
Share links Shared document views Proto action grants
Billing (individual) DynamicPlanService, Stripe
Limits enforcement LIMITS_ENFORCEMENT_SUMMARY.md
Compliance guardrails HYBRID_COMPLIANCE_SYSTEM.md

Major Features (Recent)

Feature Status Evidence Notes
Conversation history as docs conversation_history_service.ts, ConversationHistoryPanel.vue, chatModule.ts UUID-based; JSON storage
Content authoring skills config/skills/*-authoring.xml Incremental proto/doc/spreadsheet
Project Atlas (mini-app) templates/project-atlas/ Proto with window.dotted runtime
Config domain UI configDomainBehaviorRegistry.ts MCP, skills, blueprints custom flows
Custom AI providers 🔄 ai_models_domain_service.ts, branch hotfix Validation + encrypted keys
Skill import (file/URL/cloud) 🔄 SkillSourceImportService, UploadDocumentDialog Org skills WIP
Team subscription billing 🔄 feature/team-subscription-billing Stripe org checkout, member gating
Desktop local MCP socius_desktop/src/main/local-mcp.ts
Labs (Meetcute) 🔄 app/labs/meetcute/, LABS_ENABLED First lab; experimental
Engineering doc set 🔄 docs/engineering/ This tracker + 8 sibling docs

Client Surfaces

Surface Status Notes
Web SPA Primary product
Desktop (Electron) Wraps web + local MCP
M365 / Teams m365-app/ manifest
Landing / marketing Multiple landing views
Remotion videos Offline renders

Proposals (Not Implemented)

Proposal Status Source Blocker
Direct doc context vs vector store 📋 NEW_APPROACHES.md Needs prototype + perf validation
Dotted Clarity (Areas/OSTR) 📋 Dotted Overview.md Large product initiative
PrimeVue removal 📋 Engineering review Migration effort
ESLint strictness restore 📋 code-standards.md Incremental cleanup needed
Package name fixes 📋 package.json files Low priority cosmetic

CI / Quality

Check Status Notes
Backend unit tests Japa in tests/unit/
Backend e2e tests/e2e/
Backend ai_e2e Label-gated in CI
Frontend Cypress E2E + component
Husky pre-commit lint-staged
Dependabot Active

Known Issues & Deviations

Tracked deviations from ideal patterns (see sibling docs for detail):

Issue Severity Doc reference Fix status
Dual UI frameworks (Vuetify + PrimeVue) Medium ui-rules.md 📋 Deprecation planned
Frontend ESLint relaxed Medium code-standards.md 📋 Re-enable planned
Legacy CSS tokens (--vt-c-*) Low ui-tokens.md 📋 Cleanup planned
Hypermat hardcoded gradients Low ui-tokens.md 📋 Theme derive planned
UploadDocumentDialog size (~2800 LOC) Medium code-standards.md 📋 Composable extract
Org skill over-fetch in ChatOrchestrator Medium docs/features/_REVIEW.md 📋 Filter before context
SSRF gaps on skill URL import Medium docs/features/_REVIEW.md 📋 Hardening needed
Backend package name hello-world Low library-docs.md 📋 Cosmetic
Frontend package typo socious_web_client Low library-docs.md 📋 Cosmetic
No CONTRIBUTING.md Low project-overview.md 🔄 Replaced by engineering docs

Branch Activity (as of 2026-06-13)

Branch Focus Merge readiness
feature/team-subscription-billing Org Stripe billing 🔄 PR review cycle
feature/hotfix/fix/custom-ai-providers-skill-import Custom AI + skills 🔄 Request changes per review

Milestone Checklist (Engineering Docs)

Milestone Status
Architecture documented
Project overview documented
Code standards documented
UI rules documented
UI tokens documented
Library docs documented
Build plan documented
Progress tracker documented
UI registry documented
Upload to Dotted project 📋 See project-overview — MCP limitation

Update Protocol

When completing a feature:

  1. Update this tracker (status + evidence path)
  2. Update build-plan.md if scope changed
  3. Update architecture.md if structural change
  4. Update ui-registry.md if new shared components added
  5. Document deviations in code-standards.md or relevant doc

Project Overview

Product: Dotted (internal codename: Socius)
Repository: trydotted/dotted
Last updated: 2026-06-13
Audience: Engineers, product, and AI agents working in this codebase


What Dotted Is

Dotted is an AI-powered enterprise hub for document-centric knowledge work. It helps teams:

  • Aggregate context from integrations (Jira, GitHub, Slack, Gmail, Notion, etc.)
  • Generate and maintain living documents (PRDs, status slides, trackers, roadmaps)
  • Run AI agents with stakeholder personas and scheduled automations
  • Connect external tools via the Model Context Protocol (MCP)

The platform is not a single app — it is a monorepo of cooperating surfaces that share one backend API.


Monorepo Surfaces

Surface Path Stack Role
Web client socius_web_client/ Vue 3, Vite, Vuetify 3, Pinia Primary SPA
Backend API socius_backend/ AdonisJS 6, Lucid ORM, TypeScript REST, AI, MCP, billing
Desktop socius_desktop/ Electron + electron-vite Wraps web client; runs local MCP
Azure Functions socius_backend/azure_functions/ Azure Functions v4 Async directive queue
M365 app m365-app/ Teams manifest Microsoft Teams sideload package
Remotion remotion/ Remotion 4 + React Marketing video renders
Infrastructure infrastructure/ Shell scripts Azure provision/deploy
Customer blueprints customers/ JSON manifests + HTML Customer-specific templates

Core Domain Concepts

Concept Description
Project Workspace container for docs, stakeholders, integrations, vector store
Document (Doc) File-backed content (HTML, DOCX, JSON, spreadsheet, proto, drawing)
Stakeholder AI persona with role, body doc, assigned skills, review behavior
Directive Scheduled automation (RRULE/cron) that runs agent prompts
Blueprint / Template Packaged project definition in socius_backend/templates/
MCP Server Connector exposing external tool surfaces to agents
Rollup Generated status artifact from connected sources
Tenant Organization boundary for billing, domains, shared config
Lab Experimental product surface isolated under app/labs/<slug>/

User-Facing Capabilities (High Level)

  1. Projects & documents — upload, edit (TipTap, Univer, Excalidraw), version, share
  2. AI chat & agents — LangChain tool-calling with document CRUD, content generation, MCP
  3. Stakeholder review — simulated feedback from configured personas
  4. Integrations — OAuth connectors, file pickers, storage sync
  5. Blueprints — wizard-driven project instantiation from templates
  6. Billing — Stripe dynamic plans, team subscriptions, entitlements
  7. Conversation history — persisted as JSON documents (see PLAN_conversation_as_document.md)
  8. Labs — e.g. Meetcute (app/labs/meetcute/)

Development Quick Start

# Root (lint/format orchestration)
npm install

# Backend (default port 3333)
cd socius_backend && npm install && npm run dev

# Frontend (Vite dev server, proxies /api → backend)
cd socius_web_client && npm install && npm run dev

Backend supports PGlite for local dev (see socius_backend/readme.md). Doc converter (Flask/Pandoc) auto-starts via DocConverterProvider.


Key Reference Documents (Existing)

Document Path Topic
AI agent architecture ARCHITECTURE_OVERVIEW.md AgentService, tools, orchestrators
Labs pattern docs/labs/README.md Experimental product isolation
Add MCP server HOWTO.add-mcp-server.md Catalog + OAuth modes
Add OAuth provider HOWTO.add-oauth-provider.md Provider registration
Template authoring socius_backend/templates/TEMPLATE_CREATION_GUIDE.md Blueprint manifests
Dynamic plans DYNAMIC_PLANS_IMPLEMENTATION.md Stripe plan loading
Conversation docs PLAN_conversation_as_document.md Chat persistence design
Document versioning DOCUMENT_VERSIONING.md Version history system

Engineering Documentation Set

This file is part of a nine-document engineering set under docs/engineering/:

Slug File Purpose
architecture architecture.md System topology, layers, data flow
project-overview project-overview.md This document
code-standards code-standards.md Lint, format, naming, patterns
ui-rules ui-rules.md Component and layout conventions
ui-tokens ui-tokens.md Theme colors, CSS variables, fonts
library-docs library-docs.md Shared libs, MCP, AI services
build-plan build-plan.md Planned work and architectural direction
progress-tracker progress-tracker.md Feature completion status
ui-registry ui-registry.md Component catalog and registries

Naming Note

The codebase uses Socius internally (package paths, class names) while the product brand is Dotted. Both names appear in code and docs — treat them as synonymous unless context specifies otherwise.

UI Registry

Last updated: 2026-06-13
Total components: ~254 Vue SFCs in socius_web_client/src/components/

This registry catalogs shared UI components, registries, and composition patterns. It is not an exhaustive file listing — it maps domains and entry points for discovery.


Registry Systems (Meta)

These are the programmatic registries — prefer extending these over ad-hoc branching.

Config domain behavior registry

Path: src/components/config/configDomainBehaviorRegistry.ts

Domain Custom add flow Form component
mcp_servers custom_form MCPConfigForm.vue
skills_catalog custom_form UserSkillForm.vue
blueprints upload_package
ai_models generic — (no custom CRUD)
default generic

Config selection helpers

Path: src/components/config/configSelectionHelpers.ts

  • Icon resolution: API URL → provider icons → integration SVGs → MDI
  • getCustomFormComponent(domain) → lazy import from behavior registry

Backend catalog registries

Registry Path Source JSON
CatalogRegistry app/services/catalog_registry.ts Multiple
McpServerCatalog app/services/mcp_server_catalog.ts config/mcp_servers.json
Config domain registry app/services/config_domains/ Per-domain JSON
Stakeholder templates stakeholder_manager.ts config/stakeholder_templates.json
Skills catalog config/skills_catalog.json

Integration icons

Path: src/helpers/integrationIcons.ts
Assets: src/assets/images/connectors/*.svg


Component Domains

Layout & chrome

Component Path Purpose
MainHeader headers/MainHeader.vue Workspace header
DefaultHeader headers/DefaultHeader.vue Marketing header
DialogHeader headers/DialogHeader.vue Modal header
DialogFooter footers/DialogFooter.vue Modal footer
ResponsiveToolbar ResponsiveToolbar.vue Adaptive toolbar
EmptyState EmptyState.vue Zero-data placeholder
DottedLogoLoader DottedLogoLoader.vue Branded spinner
UpdateBanner UpdateBanner.vue Version update notice
PaymentFailureBanner PaymentFailureBanner.vue Billing warning

Inputs (components/inputs/)

Component Purpose
BaseInput Standard text field
BaseTextArea Multiline input
BaseSelect Dropdown select
RichTextInput Formatted text
ParameterSheet MCP parameter grid
SearchBar Search/filter
VoiceInput / VoiceTextarea Voice-to-text

Rule: New forms should use these primitives, not raw v-text-field unless Vuetify-specific behavior required.

Buttons (components/buttons/)

Component Purpose
Add Add action button
SortFilter Sort/filter control
ViewToggle Grid/list toggle
StakeholderSortFilter Stakeholder-specific filter

Documents (components/doc/, doc-viewer/)

Component Purpose
DocumentGridView / DocumentListView Doc listing
DocViewer TipTap editor shell
FormattingToolbar Editor toolbar
CommentPanel / CommentInputPopover Annotations
InlineDiffPanel Diff view
DocumentActionsMenu Doc actions
DocumentVersionHistory Version list
CodeViewer Syntax/plain text
BackingBreadcrumbs Storage path breadcrumbs
MaterializeConfirmDialog Import materialize
SyncDocToContainerDialog Sync to cloud

Spreadsheets & protos

Component Path Purpose
UniverProcessor spreadsheet/ Spreadsheet editor
ProtoAttributePopover proto-viewer/ Proto element editor
CreateProtoDialog root New proto creation

Stakeholders

Component Purpose
Stakeholders Main stakeholder panel
StakeholderDetail Detail view
StakeholderEditForm Create/edit form
StakeholderListView List layout
StakeholderGridView Grid layout (if present)
StakeholderAliasDialog Alias management
ShareStakeholderDialog Sharing
ImportStakeholderDialog Bulk import
DetectStakeholderDialogue AI detection
StakeholderDocReviewDialogue Review flow

Chat & streaming

Component Purpose
ChatInterface Main chat panel
StreamViewer Streaming output
ConversationHistoryPanel Past conversations
ActiveStreamWarningDialog Navigation guard
ExternalChatMenu External chat links
AiCompletion Inline completion

Templates & blueprints

Component Purpose
TemplateWizard Blueprint instantiation
TemplateBrowserDialog Browse templates
RollupTemplatePicker Rollup selection
BlueprintConfirmationModal Confirm instantiation
CustomBlueprintUploadDialog Upload custom blueprint
TemplatePreviewEmbed Preview iframe
GuestSignupDialog Guest flow

Integrations & MCP

Component Purpose
McpServers MCP server list
McpToolManager Tool enable/disable
MCPServerEditForm Server config
IntegrationGridView / IntegrationListView Integration browser
IntegrationActionsMenu Integration actions
ExecutionResultModal Tool result display
CredentialSetupModal OAuth setup
OAuthRequiredFields OAuth form fields

File pickers (file-pickers/)

Component Purpose
DottedFilePicker Multi-tab Dotted browser
DottedCurrentProjectTab Current project files
DottedProjectsTab Cross-project browse
GoogleDriveFilePicker Google Drive
OneDriveFilePicker OneDrive
GitHubFilePicker GitHub
NotionFilePicker Notion
BasecampFilePicker Basecamp

Tenant & org

Component Purpose
TenantCreateDialog New org
TenantEditDialog Edit org
TenantDomainsDialog Domain management
TenantRequestsDialog Join requests
InviteMembersDialog Member invites
TenantMembershipRequestModal Request to join

Config & preferences

Component Purpose
ConfigDomainCard Settings domain card
MCPConfigForm MCP server form
UserSkillForm User skill editor
UserPreferencesDialog User prefs
CombinedConfigurationForm Multi-domain config

Landing & marketing (landing/)

Component Purpose
LandingNavbar Nav bar
LandingTestimonials Social proof
IntegrationLogoStrip Logo strip
CompanyBrainSection Feature section
ReportingCostCalculator ROI calculator
RollupTreePreviewMobile Mobile tree preview

Schedule & automation

Component Purpose
ScheduleBuilder RRULE builder
NextRunsPreview Schedule preview
WeeklyDayPicker Weekly picker
MonthlyPicker Monthly picker

Shared / misc

Component Purpose
UploadDocumentDialog Upload + cloud import (+ skill mode)
CreateDocumentDialog New doc wizard
NewProjectDialog New project
ProjectPicker / ProjectDetail Project selection
OnboardingModal First-run onboarding
AboutDialog About modal
FeedbackModal User feedback
NotFound 404 page
DeleteObject Confirm delete
PdfViewer PDF display

Icons (icons/)

Custom Vue icon components + FileIconGenerator.vue. Nav icons in icons/nav/.

Prefer: MDI via Vuetify for new icons unless brand-specific SVG needed.


Views (Page-Level)

Not in components/ but part of UI surface:

View Path Route area
Workspace views src/views/main/ Authenticated app
Landing views src/views/Landing*.vue Marketing
Auth views src/views/ Login/signup
Lab views src/labs/<slug>/views/ /labs/<slug>

Stores (State Registry)

Store Path Domain
projectModule store/projectModule.ts Current project
chatModule store/chatModule.ts Chat + conversationId
docModule store/docModule.ts Active document
tenantModule store/tenantModule.ts Org context
streamingModule store/streamingModule.ts SSE streams
configSelectionModule store/configSelectionModule.ts Config UI state

Composables (Logic Registry)

Key composables in src/composables/:

Composable Purpose
useAuth Authentication state
useErrorHandler Error toasts/dialogs
useSkills Skill loading
useTeamBilling Org billing state
useTemplates Template operations
useIntegrations Integration helpers

Rule: Extract repeated component logic into composables before adding new components.


Deviations from Registry Patterns

Deviation Details
No global component library export Components imported directly, not via @dotted/ui package
PrimeVue components Some surfaces bypass Vuetify registry — undocumented scattered usage
Starter components retained HelloWorld.vue, WelcomeItem.vue — unused
UploadDocumentDialog god component Multiple modes (upload, skill, cloud) in one file — violates single-responsibility
Inconsistent icon strategy Mix of custom Vue icons, MDI, PrimeIcons, SVG assets
Labs components outside main tree src/labs/ not listed in domain groups above — intentional isolation

Adding New Components

  1. Place in appropriate domain folder under components/
  2. Use inputs/, buttons/, headers/ primitives
  3. If config-related, register in configDomainBehaviorRegistry.ts
  4. Update this registry with domain + purpose
  5. Multi-word component names preferred (TenantInviteDialog not Invite)

UI Rules

Last updated: 2026-06-13
Theme name: Hypermat (applied under Vuetify light / dark theme keys)


Design System Hierarchy

Dotted uses a Vuetify-first approach with a Fluent/Hypermat visual layer:

Vuetify 3 theme colors (--v-theme-*)
  → fluent-theme.css (--fluent-* aliases)
  → hypermat.css (gradients, radius, shadows)
  → Component scoped styles

Primary UI library: Vuetify 3 (createVuetify in src/main.ts)
Secondary: PrimeVue 4 (limited surfaces — deviation, prefer Vuetify for new work)


Layout Rules

Application shell

Surface Layout Path
Workspace WorkSpaceLayout src/layouts/WorkSpaceLayout.vue
Marketing / landing DefaultLayout src/layouts/DefaultLayout.vue
Inbox InboxLayout src/layouts/InboxLayout.vue

Spacing & radius (Hypermat)

From src/assets/styles/hypermat.css:

Element Border radius
Cards, sheets, dialogs 12px
Buttons 10px
List items 8px

Surfaces use soft borders — outlined buttons use inset shadow, not hard outlines.

Background

Hypermat applies a Trello-like glassy gradient on body:

  • Light: purple/cyan radial gradients over #f1f0f6
  • Dark: muted purple/cyan over #0f0f14

Do not override body background without preserving gradient intent.


Typography

Token Stack Usage
--font-default Satoshi, system sans Body, UI chrome
--font-space-grotesk Space Grotesk Display / marketing headings
--font-inter Inter Alternate body (rare)

Apply via .font-space-grotesk class or CSS variable. Vuetify typography classes are forced to --font-default in fluent-theme.css.


Color Usage Rules

  1. Always use theme tokens — never hardcode hex in new components unless in theme definition
  2. Reference pattern: rgb(var(--v-theme-primary)), rgba(var(--v-theme-on-surface), 0.7)
  3. Brand purple: d-purple custom color in Vuetify theme
  4. Semantic colors: success, warning, error, info, d-success, d-warning

Dark mode: use .v-theme--dark selectors or Vuetify theme-aware props.


Component Patterns

Inputs

Use shared input primitives from src/components/inputs/:

Component Use
BaseInput.vue Text fields
BaseTextArea.vue Multiline
BaseSelect.vue Dropdowns
RichTextInput.vue Formatted text
ParameterSheet.vue MCP parameter forms
SearchBar.vue Filter/search

Buttons

Use src/components/buttons/ for consistent toolbar actions:

  • Add.vue, SortFilter.vue, ViewToggle.vue, StakeholderSortFilter.vue

Prefer Vuetify v-btn with theme variants over custom button CSS.

Dialogs

Standard structure:

DialogHeader (src/components/headers/DialogHeader.vue)
  → content
DialogFooter (src/components/footers/DialogFooter.vue)

Empty states

Use EmptyState.vue for zero-data views.

Loading

Use DottedLogoLoader.vue for branded loading indicators.


Document Viewers

MIME / type Viewer Path
HTML / DOCX (converted) TipTap editor doc-viewer/DocViewer.vue
Spreadsheet Univer spreadsheet/UniverProcessor.vue
PDF PDF.js PdfViewer.vue
Proto (interactive HTML) iframe runtime proto-viewer/
Drawing Excalidraw embedded via React
Code / plain text doc/CodeViewer.vue

Do not add new viewer types without extending DocManager MIME routing.


Config Domain UI

Settings surfaces use the config domain registry pattern:

  • ConfigDomainCard.vue — card per config domain
  • configDomainBehaviorRegistry.ts — per-domain add flows
  • configSelectionHelpers.ts — icon resolution, form component lookup

When adding a new config domain, register behavior overrides in the registry rather than branching in the card component.


Icons

Resolution order (from configSelectionHelpers.ts):

  1. icon_url from API
  2. AI provider icons (src/assets/icons/)
  3. Integration connector SVGs (src/assets/images/connectors/)
  4. MDI fallback (@mdi/font)

Custom nav icons: src/components/icons/nav/


Responsive & Mobile

See socius_web_client/MOBILE_IMPROVEMENTS.md and UPDATE_MOBILE_DIALOGS.md for ongoing mobile work.

Rules:

  • Use Vuetify breakpoints (v-col, v-row, display helpers)
  • Landing pages have dedicated mobile previews (landing/RollupTreePreviewMobile.vue)
  • Dialogs should use fullscreen on small viewports where noted in mobile docs

Accessibility

  • Prefer semantic HTML in custom components
  • Virtual stakeholder and document review flows should maintain keyboard focus in dialogs
  • Landing pages reference WCAG in stakeholder templates — apply to form inputs (labels, contrast via theme tokens)

Anti-Patterns (Do Not)

Anti-pattern Why Instead
Hardcoded #6c1ef5 in components Breaks theme switching rgb(var(--v-theme-primary))
New PrimeVue components Dual framework debt Vuetify equivalent
Inline styles for layout Inconsistent spacing Vuetify grid / utility classes
Custom scrollbars outside global.css Visual inconsistency Use global scrollbar styles
Custom cursors Disabled globally cursor: auto enforced in fluent-theme
Single-word new components without reason Harder discovery Multi-word names (e.g. TenantInviteDialog)

Deviations from Guidelines

Deviation Location Notes
PrimeVue coexistence Various Legacy; do not expand usage
Vue starter --vt-c-* vars src/assets/base.css Remnant from scaffold; prefer --v-theme-*
HelloWorld.vue, WelcomeItem.vue src/components/ Vue starter leftovers — not used in prod
Large monolithic dialogs UploadDocumentDialog.vue Needs composable extraction
React embed for Excalidraw Vite config aliases Required by library
[data-theme='dark'] + .v-theme--dark hypermat.css Dual selectors for historical compat

UI Tokens

Last updated: 2026-06-13
Source of truth: socius_web_client/src/main.ts (Vuetify theme) + src/assets/styles/


Vuetify Theme Colors

Defined in createVuetify({ theme: { themes: { light, dark }}}).

Light theme (theme: 'light' — Hypermat Light)

Token Hex Usage
primary #6c1ef5 Brand purple, CTAs, links
secondary #2b88d8 Secondary actions
accent #0078d4 Accent highlights
error #d32f2f Errors, destructive
info #0288d1 Informational
success #1db954 Success states
warning #f57c00 Warnings
background #ffffff Page background (overridden by Hypermat gradient)
surface #f5f5f5 Cards, panels
on-surface #000000 Text on surfaces
on-background #000000 Text on background
d-purple #6c1ef5 Brand alias
d-success #1db954 Brand success
d-warning #db6e00 Brand warning

Dark theme (theme: 'dark' — Hypermat Dark, default)

Token Hex Usage
primary #7a44fa Brand purple (lighter for dark bg)
secondary #2b88d8 Secondary actions
accent #0078d4 Accent highlights
error #f1707b Errors
info #0078d4 Informational
success #33d47d Success
warning #ffb900 Warnings
background #161616 Base (gradient overlays apply)
surface #222222 Cards, panels
on-surface #ffffff Primary text
on-background #ffffff Page text
d-purple #7a44fa Brand alias
d-success #33d47d Brand success
d-warning #db6e00 Brand warning

Default theme: dark (set in main.ts)


CSS Custom Properties

Fluent aliases (fluent-theme.css)

Maps Vuetify vars to Fluent Design naming:

--fluent-background: rgb(var(--v-theme-background));
--fluent-surface: rgb(var(--v-theme-surface));
--fluent-surface-hover: rgba(var(--v-theme-on-surface), 0.04);
--fluent-surface-active: rgba(var(--v-theme-on-surface), 0.08);
--fluent-text-primary: rgb(var(--v-theme-on-surface));
--fluent-text-secondary: rgba(var(--v-theme-on-surface), 0.7);
--fluent-accent: rgb(var(--v-theme-primary));
--fluent-accent-hover: rgba(var(--v-theme-primary), 0.8);
--fluent-accent-active: rgba(var(--v-theme-primary), 0.6);
--fluent-border: rgba(var(--v-theme-on-surface), 0.12);
--fluent-border-focus: rgb(var(--v-theme-primary));
--fluent-error: rgb(var(--v-theme-error));
--fluent-success: rgb(var(--v-theme-success));
--fluent-warning: rgb(var(--v-theme-warning));
--fluent-info: rgb(var(--v-theme-info));

Elevation shadows

--fluent-elevation-1: 0 2px 4px rgba(var(--v-theme-on-surface), 0.1);
--fluent-elevation-2: 0 4px 8px rgba(var(--v-theme-on-surface), 0.15);
--fluent-elevation-3: 0 6px 12px rgba(var(--v-theme-on-surface), 0.2);
--fluent-elevation-4: 0 8px 16px rgba(var(--v-theme-on-surface), 0.25);

Font stacks

--font-default: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
--font-space-grotesk: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
--font-inter: 'Inter', 'Satoshi', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;

Hypermat Gradient Tokens (non-Vuetify)

Applied on body in hypermat.css — not CSS variables but fixed gradient stops:

Light mode:

  • Purple glow: rgba(124, 77, 255, 0.25) at 30% 20%
  • Cyan glow: rgba(38, 198, 218, 0.22) at 80% 80%
  • Base linear: #f1f0f6#ebeaf1

Dark mode:

  • Purple glow: rgba(124, 77, 255, 0.18)
  • Cyan glow: rgba(38, 198, 218, 0.15)
  • Base linear: #0f0f14#14141b

Deviation: Gradient hex values are hardcoded, not derived from Vuetify theme. Changing brand colors requires updating both theme and hypermat.css.


Legacy Vue Starter Tokens (base.css)

--vt-c-white, --vt-c-black
--vt-c-indigo, --vt-c-divider-light-1, --vt-c-divider-light-2
--vt-c-text-light-1, --vt-c-text-light-2
--color-background, --color-text, --section-gap

Status: Legacy from Vue scaffold. Do not use in new code. Prefer --v-theme-* or --fluent-*.


Usage Reference

In Vue SFC <style>

.my-element {
  color: rgb(var(--v-theme-on-surface));
  background: rgba(var(--v-theme-primary), 0.1);
  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
}

In Vuetify props

<v-btn color="primary" />
<v-chip color="d-success" />

Dark mode conditional

.v-theme--dark .my-panel {
  box-shadow: var(--fluent-elevation-2);
}

Token Consolidation Roadmap

Layer Status Target
Vuetify --v-theme-* ✅ Primary Keep as source of truth
Fluent --fluent-* ✅ Stable alias layer Use in custom CSS
Hypermat gradients ⚠️ Hardcoded Derive from theme in future
--vt-c-* ❌ Legacy Remove when unused refs cleared
PrimeVue theme ⚠️ Separate Minimize; no new token definitions

External Assets

Asset type Location
Satoshi font Loaded via app assets / CDN
MDI icons @mdi/font
PrimeIcons primeicons package
Connector logos src/assets/images/connectors/*.svg
Custom icons src/assets/icons/, src/components/icons/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment