Files
microdao-daarion/site/tasks/TASK_PHASE_CITY_ROOMS_FINISH_v2/index.html
Apple ef3473db21 snapshot: NODE1 production state 2026-02-09
Complete snapshot of /opt/microdao-daarion/ from NODE1 (144.76.224.179).
This represents the actual running production code that has diverged
significantly from the previous main branch.

Key changes from old main:
- Gateway (http_api.py): expanded from ~40KB to 164KB with full agent support
- Router: new /v1/agents/{id}/infer endpoint with vision + DeepSeek routing
- Behavior Policy: SOWA v2.2 (3-level: FULL/ACK/SILENT)
- Agent Registry: config/agent_registry.yml as single source of truth
- 13 agents configured (was 3)
- Memory service integration
- CrewAI teams and roles

Excluded from snapshot: venv/, .env, data/, backups, .tgz archives

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 08:46:46 -08:00

1004 lines
36 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="canonical" href="https://IvanTytar.github.io/microdao-daarion/tasks/TASK_PHASE_CITY_ROOMS_FINISH_v2/">
<link rel="icon" href="../../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.5.3, mkdocs-material-9.5.18">
<title>TASK_PHASE_CITY_ROOMS_FINISH_v2 - DAARION Documentation</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.66ac8b77.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#task_phase_city_rooms_finish_v2" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="DAARION Documentation" class="md-header__button md-logo" aria-label="DAARION Documentation" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
DAARION Documentation
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
TASK_PHASE_CITY_ROOMS_FINISH_v2
</span>
</div>
</div>
</div>
<script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="DAARION Documentation" class="md-nav__button md-logo" aria-label="DAARION Documentation" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
DAARION Documentation
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../public/" class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../public/getting-started/" class="md-nav__link">
<span class="md-ellipsis">
Getting Started
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../public/architecture-overview/" class="md-nav__link">
<span class="md-ellipsis">
Architecture
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../public/daiS_daos_overview/" class="md-nav__link">
<span class="md-ellipsis">
DAIS & DAOS
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="">
<span class="md-ellipsis">
Internal
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Internal
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_1" >
<label class="md-nav__link" for="__nav_5_1" id="__nav_5_1_label" tabindex="0">
<span class="md-ellipsis">
Infra
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_1">
<span class="md-nav__icon md-icon"></span>
Infra
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../internal/infra/INFRA_AUTOMATION_PACK_V1/" class="md-nav__link">
<span class="md-ellipsis">
Infra Automation Pack v1
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../internal/infra/monitoring_overview/" class="md-nav__link">
<span class="md-ellipsis">
Monitoring Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../internal/infra/nodes_registry_v0/" class="md-nav__link">
<span class="md-ellipsis">
Nodes Registry v0
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2" >
<label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0">
<span class="md-ellipsis">
Specs
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_2">
<span class="md-nav__icon md-icon"></span>
Specs
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../internal/specs/matrix_presence_aggregator/" class="md-nav__link">
<span class="md-ellipsis">
Matrix Presence Aggregator
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../internal/specs/city_map_spec/" class="md-nav__link">
<span class="md-ellipsis">
City Map Spec
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../internal/specs/node_join_protocol_draft/" class="md-nav__link">
<span class="md-ellipsis">
Node Join Protocol (Draft)
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#title" class="md-nav__link">
<span class="md-ellipsis">
Title
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#1-overview" class="md-nav__link">
<span class="md-ellipsis">
1. Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-current-state-as-of-2025-12-01" class="md-nav__link">
<span class="md-ellipsis">
2. Current State (as of 2025-12-01)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-goals" class="md-nav__link">
<span class="md-ellipsis">
3. Goals
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#4-backend-tasks" class="md-nav__link">
<span class="md-ellipsis">
4. Backend Tasks
</span>
</a>
<nav class="md-nav" aria-label="4. Backend Tasks">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#41-room-model-repository" class="md-nav__link">
<span class="md-ellipsis">
4.1. Room model &amp; repository
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#5-frontend-tasks" class="md-nav__link">
<span class="md-ellipsis">
5. Frontend Tasks
</span>
</a>
<nav class="md-nav" aria-label="5. Frontend Tasks">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#51-fix-nan-online-stats" class="md-nav__link">
<span class="md-ellipsis">
5.1. Fix NaN online stats
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#52-microdao-rooms-section" class="md-nav__link">
<span class="md-ellipsis">
5.2. MicroDAO Rooms section
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#53-city-lobby-cta" class="md-nav__link">
<span class="md-ellipsis">
5.3. City Lobby CTA
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#6-acceptance-criteria" class="md-nav__link">
<span class="md-ellipsis">
6. Acceptance Criteria
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="task_phase_city_rooms_finish_v2">TASK_PHASE_CITY_ROOMS_FINISH_v2<a class="headerlink" href="#task_phase_city_rooms_finish_v2" title="Permanent link">&para;</a></h1>
<h2 id="title">Title<a class="headerlink" href="#title" title="Permanent link">&para;</a></h2>
<p>TASK_PHASE_CITY_ROOMS_FINISH_v2 — MicroDAO Rooms + City Lobby CTA + Online Stats Fix</p>
<h2 id="1-overview">1. Overview<a class="headerlink" href="#1-overview" title="Permanent link">&para;</a></h2>
<p>Finish the DAARION City chat layer:</p>
<ol>
<li>City Rooms page:</li>
<li>Map + List already work.</li>
<li>
<p>Fix <code>NaN</code> for online users count.</p>
</li>
<li>
<p>MicroDAO Rooms:</p>
</li>
<li>Each MicroDAO must have its own rooms section.</li>
<li>
<p>Ability to create new rooms from MicroDAO cabinet.</p>
</li>
<li>
<p>City Lobby CTA:</p>
</li>
<li>Main public chat with DAARWIZZ should be accessible directly from the homepage and top navigation.</li>
</ol>
<p>All changes must use existing architecture: <code>city-service</code> (FastAPI + Postgres) and <code>apps/web</code> (Next.js / React).</p>
<hr />
<h2 id="2-current-state-as-of-2025-12-01">2. Current State (as of 2025-12-01)<a class="headerlink" href="#2-current-state-as-of-2025-12-01" title="Permanent link">&para;</a></h2>
<ul>
<li>Backend:</li>
<li><code>scripts/seed_city_rooms.py</code> creates ~31 rooms (district rooms, lobbies, city lobby, etc.).</li>
<li><code>city-service</code> exposes <code>/api/v1/city/rooms</code> (already used by UI).</li>
<li>
<p>Rooms table already contains:</p>
<ul>
<li><code>id</code></li>
<li><code>slug</code></li>
<li><code>name</code> (title)</li>
<li><code>description</code></li>
<li><code>zone</code> (district key)</li>
<li><code>room_type</code> (e.g. <code>city</code>, <code>district</code>, <code>microdao</code>, etc.)</li>
<li><code>is_public</code> (bool)</li>
<li><code>microdao_id</code> (nullable, for MicroDAO rooms)</li>
</ul>
</li>
<li>
<p>Frontend:</p>
</li>
<li><code>/city</code> (City Rooms):<ul>
<li>Map tab: grid of districts, shows total rooms and online counters.</li>
<li>List tab: renders all rooms with description.</li>
<li>At the bottom: summary cards: <code>Kімнат: 31</code>, <code>Онлайн: NaN</code>.</li>
</ul>
</li>
<li>MicroDAO pages (<code>/microdao/[slug]</code>):<ul>
<li>Currently have no dedicated "MicroDAO Rooms" section.</li>
</ul>
</li>
<li>Homepage (<code>/</code>):<ul>
<li>No direct CTA to "DAARION City Lobby".</li>
</ul>
</li>
</ul>
<hr />
<h2 id="3-goals">3. Goals<a class="headerlink" href="#3-goals" title="Permanent link">&para;</a></h2>
<ol>
<li><strong>Fix online counter</strong>:</li>
<li>
<p>Never show <code>NaN</code> on the City Rooms page.</p>
</li>
<li>
<p><strong>MicroDAO Rooms UI</strong>:</p>
</li>
<li>
<p>On <code>/microdao/[slug]</code> display:</p>
<ul>
<li>List of rooms belonging to this MicroDAO.</li>
<li>Button "Створити кімнату".</li>
</ul>
</li>
<li>
<p><strong>City Lobby CTA</strong>:</p>
</li>
<li>On homepage and/or main menu:<ul>
<li>Button "Поспілкуватися з DAARWIZZ" that opens <code>DAARION City Lobby</code>.</li>
</ul>
</li>
</ol>
<hr />
<h2 id="4-backend-tasks">4. Backend Tasks<a class="headerlink" href="#4-backend-tasks" title="Permanent link">&para;</a></h2>
<h3 id="41-room-model-repository">4.1. Room model &amp; repository<a class="headerlink" href="#41-room-model-repository" title="Permanent link">&para;</a></h3>
<p>Files:
* <code>services/city-service/models_city.py</code>
* <code>services/city-service/repo_city.py</code>
* <code>services/city-service/routes_city.py</code></p>
<ol>
<li><strong>Ensure Room model exposes needed fields:</strong></li>
</ol>
<div class="codehilite"><pre><span></span><code><span class="k">class</span><span class="w"> </span><span class="nc">CityRoomSummary</span><span class="p">(</span><span class="n">BaseModel</span><span class="p">):</span>
<span class="nb">id</span><span class="p">:</span> <span class="nb">str</span>
<span class="n">slug</span><span class="p">:</span> <span class="nb">str</span>
<span class="n">name</span><span class="p">:</span> <span class="nb">str</span>
<span class="n">description</span><span class="p">:</span> <span class="n">Optional</span><span class="p">[</span><span class="nb">str</span><span class="p">]</span>
<span class="n">zone</span><span class="p">:</span> <span class="n">Optional</span><span class="p">[</span><span class="nb">str</span><span class="p">]</span>
<span class="n">room_type</span><span class="p">:</span> <span class="nb">str</span>
<span class="n">microdao_id</span><span class="p">:</span> <span class="n">Optional</span><span class="p">[</span><span class="nb">str</span><span class="p">]</span>
<span class="n">is_public</span><span class="p">:</span> <span class="nb">bool</span>
<span class="n">members_online</span><span class="p">:</span> <span class="nb">int</span> <span class="o">=</span> <span class="mi">0</span> <span class="c1"># ← must always be integer (0 by default)</span>
</code></pre></div>
<ol>
<li><strong>Repo method for city rooms:</strong></li>
<li>
<p><code>get_all_rooms()</code> must:</p>
<ul>
<li>Return <code>members_online</code> as integer (use <code>COALESCE(..., 0)</code>).</li>
</ul>
</li>
<li>
<p><strong>Repo method for MicroDAO rooms:</strong>
Add/verify method:</p>
</li>
</ol>
<div class="codehilite"><pre><span></span><code><span class="k">async</span> <span class="k">def</span><span class="w"> </span><span class="nf">get_microdao_rooms</span><span class="p">(</span><span class="n">microdao_id</span><span class="p">:</span> <span class="nb">str</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="n">List</span><span class="p">[</span><span class="nb">dict</span><span class="p">]:</span>
<span class="w"> </span><span class="sd">&quot;&quot;&quot;Get rooms for specific MicroDAO&quot;&quot;&quot;</span>
<span class="c1"># WHERE microdao_id = $1 AND is_public = true OR owner_type = &#39;microdao&#39;</span>
</code></pre></div>
<ol>
<li><strong>API routes:</strong></li>
<li>Verify endpoint: <code>GET /api/v1/city/rooms</code> returns <code>members_online: int</code>.</li>
<li>Verify endpoint: <code>GET /city/microdao/{slug}/rooms</code> returns MicroDAO rooms.</li>
<li>Add endpoint for room creation:</li>
</ol>
<div class="codehilite"><pre><span></span><code><span class="k">class</span><span class="w"> </span><span class="nc">CreateRoomRequest</span><span class="p">(</span><span class="n">BaseModel</span><span class="p">):</span>
<span class="n">title</span><span class="p">:</span> <span class="nb">str</span>
<span class="n">description</span><span class="p">:</span> <span class="n">Optional</span><span class="p">[</span><span class="nb">str</span><span class="p">]</span>
<span class="n">room_type</span><span class="p">:</span> <span class="nb">str</span> <span class="o">=</span> <span class="s2">&quot;microdao&quot;</span>
<span class="n">is_public</span><span class="p">:</span> <span class="nb">bool</span> <span class="o">=</span> <span class="kc">False</span>
<span class="nd">@router</span><span class="o">.</span><span class="n">post</span><span class="p">(</span><span class="s2">&quot;/city/microdao/</span><span class="si">{slug}</span><span class="s2">/rooms&quot;</span><span class="p">)</span>
<span class="k">async</span> <span class="k">def</span><span class="w"> </span><span class="nf">create_microdao_room</span><span class="p">(</span><span class="n">slug</span><span class="p">:</span> <span class="nb">str</span><span class="p">,</span> <span class="n">body</span><span class="p">:</span> <span class="n">CreateRoomRequest</span><span class="p">):</span>
<span class="c1"># Create room for MicroDAO</span>
</code></pre></div>
<ol>
<li><strong>Online stats summary:</strong></li>
<li>Add/verify endpoint: <code>GET /api/v1/city/rooms/summary</code></li>
<li>Returns: <code>{"rooms_total": int, "online_total": int}</code></li>
</ol>
<hr />
<h2 id="5-frontend-tasks">5. Frontend Tasks<a class="headerlink" href="#5-frontend-tasks" title="Permanent link">&para;</a></h2>
<p>Files:
* <code>apps/web/src/app/city/page.tsx</code>
* <code>apps/web/src/app/microdao/[slug]/page.tsx</code>
* <code>apps/web/src/app/page.tsx</code> (homepage)
* <code>apps/web/src/components/microdao/MicrodaoRoomsSection.tsx</code> (new)</p>
<h3 id="51-fix-nan-online-stats">5.1. Fix <code>NaN</code> online stats<a class="headerlink" href="#51-fix-nan-online-stats" title="Permanent link">&para;</a></h3>
<ol>
<li>In <code>city/page.tsx</code>:</li>
<li>Ensure online count uses fallback:</li>
</ol>
<div class="codehilite"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">onlineTotal</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">summary</span><span class="o">?</span><span class="p">.</span><span class="nx">online_total</span><span class="w"> </span><span class="o">??</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<span class="c1">// or</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">onlineTotal</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Number</span><span class="p">(</span><span class="nx">summary</span><span class="o">?</span><span class="p">.</span><span class="nx">online_total</span><span class="p">)</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
</code></pre></div>
<ol>
<li>If API returns <code>null</code> or <code>undefined</code>, display <code>0</code>.</li>
</ol>
<h3 id="52-microdao-rooms-section">5.2. MicroDAO Rooms section<a class="headerlink" href="#52-microdao-rooms-section" title="Permanent link">&para;</a></h3>
<p>In <code>apps/web/src/app/microdao/[slug]/page.tsx</code>:</p>
<ol>
<li>Add API call:</li>
</ol>
<div class="codehilite"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">rooms</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">fetchMicrodaoRooms</span><span class="p">(</span><span class="nx">slug</span><span class="p">);</span><span class="w"> </span><span class="c1">// GET /city/microdao/{slug}/rooms</span>
</code></pre></div>
<ol>
<li>Render new section:</li>
</ol>
<div class="codehilite"><pre><span></span><code><span class="p">&lt;</span><span class="nt">section</span><span class="w"> </span><span class="na">className</span><span class="o">=</span><span class="s">&quot;space-y-4&quot;</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">div</span><span class="w"> </span><span class="na">className</span><span class="o">=</span><span class="s">&quot;flex items-center justify-between&quot;</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">h2</span><span class="w"> </span><span class="na">className</span><span class="o">=</span><span class="s">&quot;text-xl font-semibold&quot;</span><span class="p">&gt;</span><span class="nx">Кімнати</span><span class="w"> </span><span class="nx">MicroDAO</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">Button</span><span class="w"> </span><span class="na">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">openCreateRoomModal</span><span class="p">}&gt;</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">Plus</span><span class="w"> </span><span class="na">className</span><span class="o">=</span><span class="s">&quot;w-4 h-4 mr-2&quot;</span><span class="w"> </span><span class="p">/&gt;</span>
<span class="w"> </span><span class="nx">Створити</span><span class="w"> </span><span class="nx">кімнату</span>
<span class="w"> </span><span class="p">&lt;/</span><span class="nt">Button</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">{</span><span class="nx">rooms</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="p">(</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">p</span><span class="w"> </span><span class="na">className</span><span class="o">=</span><span class="s">&quot;text-muted-foreground&quot;</span><span class="p">&gt;</span>
<span class="w"> </span><span class="nx">Ще</span><span class="w"> </span><span class="nx">немає</span><span class="w"> </span><span class="nx">кімнат</span><span class="p">.</span><span class="w"> </span><span class="nx">Створіть</span><span class="w"> </span><span class="nx">першу</span><span class="w"> </span><span class="nx">кімнату</span><span class="w"> </span><span class="nx">для</span><span class="w"> </span><span class="nx">цієї</span><span class="w"> </span><span class="nx">платформи</span><span class="p">.</span>
<span class="w"> </span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="p">(</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">div</span><span class="w"> </span><span class="na">className</span><span class="o">=</span><span class="s">&quot;grid gap-3&quot;</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">{</span><span class="nx">rooms</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">room</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">(</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">MicrodaoRoomCard</span><span class="w"> </span><span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">room</span><span class="p">.</span><span class="nx">slug</span><span class="p">}</span><span class="w"> </span><span class="na">room</span><span class="o">=</span><span class="p">{</span><span class="nx">room</span><span class="p">}</span><span class="w"> </span><span class="p">/&gt;</span>
<span class="w"> </span><span class="p">))}</span>
<span class="w"> </span><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">)}</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
</code></pre></div>
<ol>
<li><code>MicrodaoRoomCard</code> component:</li>
<li>title</li>
<li>description</li>
<li>room_type (badge)</li>
<li>visibility (Public/Private badge)</li>
<li>
<p>members_online</p>
</li>
<li>
<p>"Create Room" modal:</p>
</li>
<li>Назва кімнати (title, required)</li>
<li>Опис (optional)</li>
<li>Тип (select: Lobby, Governance, Project, Crew)</li>
<li>Видимість (switch: Public / Private, default = Private)</li>
<li>On submit → POST <code>/city/microdao/{slug}/rooms</code></li>
</ol>
<h3 id="53-city-lobby-cta">5.3. City Lobby CTA<a class="headerlink" href="#53-city-lobby-cta" title="Permanent link">&para;</a></h3>
<ol>
<li>On homepage (<code>apps/web/src/app/page.tsx</code>):</li>
</ol>
<div class="codehilite"><pre><span></span><code><span class="p">&lt;</span><span class="nt">section</span><span class="w"> </span><span class="na">className</span><span class="o">=</span><span class="s">&quot;py-12 text-center&quot;</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">h2</span><span class="w"> </span><span class="na">className</span><span class="o">=</span><span class="s">&quot;text-2xl font-bold mb-4&quot;</span><span class="p">&gt;</span>
<span class="w"> </span><span class="nx">Головний</span><span class="w"> </span><span class="nx">публічний</span><span class="w"> </span><span class="nx">чат</span><span class="w"> </span><span class="nx">DAARION</span><span class="w"> </span><span class="nx">City</span>
<span class="w"> </span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">p</span><span class="w"> </span><span class="na">className</span><span class="o">=</span><span class="s">&quot;text-muted-foreground mb-6&quot;</span><span class="p">&gt;</span>
<span class="w"> </span><span class="nx">Поспілкуватися</span><span class="w"> </span><span class="nx">з</span><span class="w"> </span><span class="nx">DAARWIZZ</span><span class="w"> </span><span class="nx">та</span><span class="w"> </span><span class="nx">іншими</span><span class="w"> </span><span class="nx">громадянами</span><span class="w"> </span><span class="nx">міста</span><span class="p">.</span>
<span class="w"> </span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">Link</span><span class="w"> </span><span class="na">href</span><span class="o">=</span><span class="s">&quot;/city?room=city-lobby&quot;</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">Button</span><span class="w"> </span><span class="na">size</span><span class="o">=</span><span class="s">&quot;lg&quot;</span><span class="w"> </span><span class="na">className</span><span class="o">=</span><span class="s">&quot;gap-2&quot;</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">&lt;</span><span class="nt">MessageCircle</span><span class="w"> </span><span class="na">className</span><span class="o">=</span><span class="s">&quot;w-5 h-5&quot;</span><span class="w"> </span><span class="p">/&gt;</span>
<span class="w"> </span><span class="nx">Поспілкуватися</span><span class="w"> </span><span class="nx">з</span><span class="w"> </span><span class="nx">DAARWIZZ</span>
<span class="w"> </span><span class="p">&lt;/</span><span class="nt">Button</span><span class="p">&gt;</span>
<span class="w"> </span><span class="p">&lt;/</span><span class="nt">Link</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
</code></pre></div>
<ol>
<li>Optionally add to navigation header:</li>
<li>New item: "City Lobby" → <code>/city?room=city-lobby</code></li>
</ol>
<hr />
<h2 id="6-acceptance-criteria">6. Acceptance Criteria<a class="headerlink" href="#6-acceptance-criteria" title="Permanent link">&para;</a></h2>
<ol>
<li>City Rooms page shows:</li>
<li>Correct number of rooms.</li>
<li>
<p>Online count is integer (0 allowed), never <code>NaN</code>.</p>
</li>
<li>
<p>MicroDAO page (<code>/microdao/daarion</code>, etc.) shows:</p>
</li>
<li>"Кімнати MicroDAO" section.</li>
<li>Ability to create a room.</li>
<li>
<p>Newly created room appears in list.</p>
</li>
<li>
<p>Homepage shows:</p>
</li>
<li>CTA "Поспілкуватися з DAARWIZZ".</li>
<li>
<p>Clicking the button opens City Lobby room.</p>
</li>
<li>
<p>All routes work both on NODE1 and NODE2.</p>
</li>
</ol>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.sections", "navigation.instant", "content.code.copy"], "search": "../../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.3220b9d7.min.js"></script>
</body>
</html>