@fui-org/fui-cli 1.3.1 → 2.0.0

package/skills/fui-skill/references/watcher-patterns.md

@@ -1,48 +1,20 @@
-# Watcher Patterns (FUI Best Practice)
+# Watcher Patterns
 
-> File này sở hữu: **`watch`: `v_old`, deep-watch, cascading, chống race**. Cú pháp action xem [controls-patterns.md](controls-patterns.md).
+> Owns: **`watch`: `v_old`, deep-watch, cascading, race control**. Action syntax: [controls-patterns.md](controls-patterns.md).
 
-Hướng này dùng cho các case:
-- Form phụ thuộc nhiều cấp (Tỉnh/Thành -> Quận/Huyện -> Phường/Xã)
-- Bộ lọc theo thuộc tính (status, loại, ngày, keyword, ...)
+Use for multi-level dependent forms (Province → District → Ward) and attribute filters (status, type, date, keyword...). Goals: correct FUI structure (`data`, `watch`, `controls`, `set`), no watcher loops, fewer redundant API calls, maintainable large modules.
 
-Mục tiêu:
-- Đúng cấu trúc FUI (`module.json`: `data`, `watch`, `controls`, `set`)
-- Tránh vòng lặp watcher
-- Giảm gọi API thừa
-- Dễ bảo trì khi module lớn
+## 1. Rules
 
-## 1. Nguyên tắc chuẩn
+1. **Watch the smallest input key** — an ID or filter field (`provinceID`, `districtID`, `filter.status`), not a large object unless needed.
+2. **Split actions by level** — `handleProvinceChange` only resets dependents and calls `apiLoadDistricts`; `handleDistrictChange` only resets the level below and calls `apiLoadWards`; `applyFilters` holds the final list-loading logic.
+3. **`deep-watch` selectively** — only small filter objects (e.g. `filter`). Never deep-watch large arrays like `items`, `tableData`.
+4. **No self-made loops** — never watch the action's own output var; never watch `items` and write `items` in the callback.
+5. **Guard before API calls** — `IF/THEN/ELSE` to validate input (e.g. no province selected → don't load districts).
+6. **Debounce/race control in `script.js`** — watchers only orchestrate; debounce and stale-response-overwrite protection live in JS helpers.
+7. **Force literal strings only via `IN`** — in an action with `IN`, a string without spaces may be read as an expression → use `` `value`` or `"'value'"`. Full rules: [controls-patterns.md §0](controls-patterns.md#0-value-resolution-rules-fundamental).
 
-1. Chỉ watch key đầu vào nhỏ nhất
-- Watch ID hoặc field filter (`provinceID`, `districtID`, `filter.status`), không watch cả object lớn nếu không cần.
-
-2. Tách action theo tầng
-- `handleProvinceChange` chỉ reset dữ liệu phụ thuộc và gọi `apiLoadDistricts`.
-- `handleDistrictChange` chỉ reset cấp dưới và gọi `apiLoadWards`.
-- `applyFilters` gom logic tải list cuối.
-
-3. Dùng `deep-watch` có chọn lọc
-- Chỉ dùng cho object filter nhỏ (ví dụ `filter`).
-- Không deep-watch mảng lớn như `items`, `tableData`.
-
-4. Không để watcher tự tạo loop
-- Không watch biến output của chính action đó.
-- Không watch `items` rồi trong callback lại ghi `items`.
-
-5. Gắn điều kiện trước khi gọi API
-- Dùng `IF/THEN/ELSE` để kiểm tra đầu vào hợp lệ (ví dụ chưa chọn tỉnh thì không gọi huyện).
-
-6. Tách debounce/race-control sang `script.js`
-- Watcher giữ vai trò điều phối.
-- Debounce hoặc chống response cũ ghi đè response mới đặt trong helper JS.
-
-7. Literal string chỉ ép khi truyền qua `IN`
-- Trong action có `IN`, chuỗi không có khoảng trắng có thể bị core hiểu là expression → dùng
-  `` `value`` hoặc `"'value'"`. Quy tắc đầy đủ:
-  [controls-patterns.md §0](controls-patterns.md#0-value-resolution-rules-fundamental).
-
-## 2. Pattern A: Cascading địa giới hành chính
+## 2. Pattern A: administrative-area cascade
 
 ```json
 {
@@ -108,12 +80,9 @@ Mục tiêu:
 }
 ```
 
-Điểm chính:
-- Watch theo key cụ thể.
-- Reset cấp dưới trước khi gọi API cấp dưới.
-- Có điều kiện tránh gọi API khi null.
+Key points: watch specific keys; reset lower levels before calling their API; guard against calling with null.
 
-## 3. Pattern B: Filter object + deep-watch
+## 3. Pattern B: filter object + deep-watch
 
 ```json
 {
@@ -153,26 +122,24 @@ Mục tiêu:
 }
 ```
 
-Khi dùng pattern này:
-- `filter` nên nhỏ và ổn định.
-- Nếu có text search nhập liên tục, nên debounce trong `script.js`.
+Keep `filter` small and stable. Continuous text-search input → debounce in `script.js`.
 
-## 4. Debounce khuyến nghị (script.js)
+## 4. Recommended debounce (script.js)
 
 ```javascript
 var filterTimer = null;
 
 function debounceFilter(input) {
-    var callActionName = input && input.callActionName;
-    var waitMs = input && input.waitMs;
-    clearTimeout(filterTimer);
-    filterTimer = setTimeout(function () {
-        CALL(vueData[callActionName]);
-    }, waitMs || 350);
+  var callActionName = input && input.callActionName;
+  var waitMs = input && input.waitMs;
+  clearTimeout(filterTimer);
+  filterTimer = setTimeout(function () {
+    CALL(vueData[callActionName]);
+  }, waitMs || 350);
 }
 ```
 
-Ví dụ action trong `module.json`:
+Action in `module.json`:
 
 ```json
 {
@@ -186,11 +153,11 @@ Ví dụ action trong `module.json`:
 }
 ```
 
-## 5. Checklist QA cho watcher
+## 5. Watcher QA checklist
 
-1. Watch key có đủ nhỏ chưa (ID/field thay vì object lớn)?
-2. Có reset đúng dữ liệu phụ thuộc trước khi gọi API?
-3. Có guard `IF` trước API khi input null/rỗng?
-4. Có nguy cơ loop watcher không?
-5. Có cần debounce cho input text không?
-6. Nếu action có `IN`, đã áp dụng literal string rule cho giá trị text không khoảng trắng chưa?
+1. Watch key small enough (ID/field, not a large object)?
+2. Dependents reset before calling the API?
+3. `IF` guard before API when input is null/empty?
+4. Any watcher loop risk?
+5. Text input needs debounce?
+6. Action with `IN`: literal string rule applied to space-free text values?

package/skills/fui-skill/references/websocket-realtime.md

@@ -1,47 +1,41 @@
 # FUI Real-time Messaging — WebSocket (SignalR)
 
-> File này sở hữu: **real-time/SignalR: `webSocketJoinGroup`, `webSocket_Send`**.
+> Owns: **real-time/SignalR: `webSocketJoinGroup`, `webSocket_Send`**.
 
-FUI cung cấp cơ chế real-time messaging dựa trên **SignalR** (không phải WebSocket API thuần của trình duyệt), host tại domain riêng `ws.fui.vn`. Toàn bộ logic client đã có sẵn trong `defaultfunction.js` (global, không cần viết lại) — chỉ cần khai báo đúng cấu trúc trong `module.json` và gọi 3 hàm sẵn có: `webSocketConnection`, `webSocketJoinGroup`, `webSocket_Send`.
+Real-time uses **SignalR** (not the browser WebSocket API), hosted at `ws.fui.vn`. Client logic is already global in `defaultfunction.js` — do not rewrite it. Declare the right structure in `module.json` and use the 3 built-ins: `webSocketConnection`, `webSocketJoinGroup`, `webSocket_Send`.
 
 ---
 
-## 1. Import bắt buộc
+## 1. Required imports
 
-Trước khi dùng, phải thêm 2 file JS qua `file_import_new` — **đúng thứ tự** (dòng dưới phụ thuộc dòng trên):
+Add 2 JS files with `fui import new` — **in this order** (second depends on first):
 
-| Thứ tự | File | Ghi chú |
-|---|---|---|
-| 1 (sort nhỏ hơn) | `https://ws.fui.vn/Scripts/jquery.signalR-2.4.1.min.js` | SignalR client core |
-| 2 (sort lớn hơn) | `https://ws.fui.vn/signalr/hubs` | Hub proxy tự sinh từ server — vẫn là nội dung JS dù URL không có đuôi `.js` |
+| Order           | File                                                    | Note                                                               |
+| --------------- | ------------------------------------------------------- | ------------------------------------------------------------------ |
+| 1 (lower sort)  | `https://ws.fui.vn/Scripts/jquery.signalR-2.4.1.min.js` | SignalR client core                                                |
+| 2 (higher sort) | `https://ws.fui.vn/signalr/hubs`                        | Server-generated hub proxy — JS content despite no `.js` extension |
 
+```bash
+fui import new --type .js --content-type link --name "https://ws.fui.vn/Scripts/jquery.signalR-2.4.1.min.js" --sort 100
+fui import new --type .js --content-type link --name "https://ws.fui.vn/signalr/hubs" --sort 110
 ```
-file_import_new({
-  fileType: ".js", contentType: "link",
-  fileName: "https://ws.fui.vn/Scripts/jquery.signalR-2.4.1.min.js",
-  fileSort: 100
-})
-file_import_new({
-  fileType: ".js", contentType: "link",
-  fileName: "https://ws.fui.vn/signalr/hubs",
-  fileSort: 110
-})
-```
 
-> jQuery đã có sẵn trong FUI runtime — không cần import thêm. Kiểm tra `file_import_list` trước để tránh add trùng (giống quy trình `f-echart` trong [components-echart.md](components-echart.md)).
+See `fui import new --help`.
+
+> jQuery is already in the FUI runtime — do not import it. Run `fui import list` first to avoid duplicates (same flow as `f-echart` in [components-echart.md](components-echart.md)).
 
 ---
 
-## 2. Cơ chế tự động kết nối khi module load
+## 2. Auto-connect on module load
 
-FUI's bootstrap (`buildApp` trong `fastproject.js`) kiểm tra `vueData.webSocket` ngay sau khi `data[]` chạy xong:
+FUI bootstrap (`buildApp` in `fastproject.js`) checks `vueData.webSocket` right after `data[]` runs:
 
-- Nếu `vueData.webSocket` tồn tại → tự tạo `vueData.webSocketState = { code, text }` và gọi `webSocketConnection('https://ws.fui.vn/signalr', vueData.webSocket, vueData.webSocketState)` + `webSocketJoinGroup(vueData.webSocket)` — **không cần tự gọi 2 hàm này ở bootstrap**, chỉ cần khai báo đúng object `webSocket` trong `data[]`.
-- `webSocketState.text` phản ánh trạng thái kết nối: `Reconnecting` / `Connected` / `Disconnected`. Có thể bind trực tiếp lên UI để debug (`innerHTML: "{{webSocketState}}"`).
+- If `vueData.webSocket` exists → creates `vueData.webSocketState = { code, text }` and calls `webSocketConnection('https://ws.fui.vn/signalr', vueData.webSocket, vueData.webSocketState)` + `webSocketJoinGroup(vueData.webSocket)`. **Do not call these yourself at bootstrap** — just declare `webSocket` in `data[]`.
+- `webSocketState.text`: `Reconnecting` / `Connected` / `Disconnected`. Bind to UI for debugging (`innerHTML: "{{webSocketState}}"`).
 
 ---
 
-## 3. Khai báo group cần join — trong `data[]`
+## 3. Declare groups to join — in `data[]`
 
 ```json
 "data": [
@@ -57,18 +51,18 @@ FUI's bootstrap (`buildApp` trong `fastproject.js`) kiểm tra `vueData.webSocke
 ]
 ```
 
-- Mỗi **key** của object `webSocket` là tên một group sẽ được join khi module load.
-- **Kiểu giá trị quyết định cách nhận tin nhắn:**
-  - Giá trị là **array** (`[]`) → tin nhắn mới được **push** vào cuối mảng (giữ lịch sử, dùng cho chat log, danh sách sự kiện...).
-  - Giá trị là **`null` hoặc object** (`{}`) → tin nhắn mới **ghi đè** giá trị hiện tại (chỉ giữ tin mới nhất, dùng cho trạng thái/counter/notification đơn).
-- Group name có thể là chuỗi literal (`nhom1`) hoặc **dynamic qua `{{ }}` interpolation ngay trong key** — `"{{DGroup}}"` sẽ được resolve thành giá trị hiện tại của `DGroup` (ví dụ `device-abc`), cho phép join theo group riêng của user/thiết bị.
-- `` `ThuNha `` / `` `device-abc `` dùng backtick để ép literal string — xem [Value Resolution Rules](controls-patterns.md#0-value-resolution-rules-fundamental).
+- Each **key** of `webSocket` = a group joined on load.
+- **Value type sets receive behavior:**
+  - **array** (`[]`) → new messages **pushed** to the end (history: chat log, event list...).
+  - **`null` or object** (`{}`) → new message **overwrites** (latest only: status/counter/single notification).
+- Group name: literal (`nhom1`) or **dynamic via `{{ }}` in the key** — `"{{DGroup}}"` resolves to `DGroup`'s current value (e.g. `device-abc`), for per-user/device groups.
+- `` `ThuNha `` / `` `device-abc `` use backtick to force a literal string — see [Value Resolution Rules](controls-patterns.md#0-value-resolution-rules-fundamental).
 
 ---
 
-## 4. Join thêm group tại runtime — `FUN: webSocketJoinGroup`
+## 4. Join more groups at runtime — `FUN: webSocketJoinGroup`
 
-Ngoài khai báo tĩnh ở mục 3, có thể join thêm group bất cứ lúc nào (kể cả ngay trong `data[]` dưới dạng action tự chạy khi load — xem [ui-patterns.md §1](ui-patterns.md)):
+Join any time, including as an auto-run action in `data[]` (see [ui-patterns.md §1](ui-patterns.md)):
 
 ```json
 {
@@ -80,14 +74,14 @@ Ngoài khai báo tĩnh ở mục 3, có thể join thêm group bất cứ lúc n
 }
 ```
 
-- `IN` ở đây **chính là `groupObj`** (tham số đầu tiên của `webSocketJoinGroup(groupObj, timeout, callBackFunc)`) — không map theo tên tham số như hàm khác. Vì vậy `FUN` + `IN` **không truyền được `timeout`/`callBackFunc`** — nếu cần custom timeout hoặc callback sau khi join xong, dùng `EXE` raw JS: `"EXE": "webSocketJoinGroup({Nhom3:null}, 3000, function(){ ... })"`.
-- Dùng cách này khi group cần join phát sinh **có điều kiện** hoặc **sau khi** module đã load (ví dụ: trong một action, sau khi API trả về ID phòng/chat cần join), thay vì chỉ khai báo tĩnh trong `webSocket: {}`.
+- `IN` **is the `groupObj`** (first param of `webSocketJoinGroup(groupObj, timeout, callBackFunc)`), not mapped by param name. So `FUN` + `IN` **cannot pass `timeout`/`callBackFunc`** — for those use raw `EXE`: `"EXE": "webSocketJoinGroup({Nhom3:null}, 3000, function(){ ... })"`.
+- Use for groups that are **conditional** or known only **after** load (e.g. after an API returns a room/chat ID), instead of static `webSocket: {}`.
 
 ---
 
-## 5. Nhận tin nhắn
+## 5. Receive messages
 
-### watch (khuyến nghị — trigger logic khi có tin mới)
+### watch (recommended — run logic on new message)
 
 ```json
 "watch": {
@@ -96,9 +90,9 @@ Ngoài khai báo tĩnh ở mục 3, có thể join thêm group bất cứ lúc n
 }
 ```
 
-> **Lưu ý quan trọng:** key trong `watch` **không được** dùng `{{ }}` template (watch key là literal cố định, không interpolate) — phải ghi trực tiếp giá trị đã resolve của group (ví dụ `webSocket.device-abc`, không phải `webSocket.{{DGroup}}`).
+> **Important:** `watch` keys **cannot** use `{{ }}` (literal, not interpolated) — write the resolved group (`webSocket.device-abc`, not `webSocket.{{DGroup}}`).
 
-### Bind trực tiếp lên UI (hiển thị raw, không cần watch)
+### Bind directly to UI (raw, no watch)
 
 ```json
 {
@@ -107,7 +101,7 @@ Ngoài khai báo tĩnh ở mục 3, có thể join thêm group bất cứ lúc n
 }
 ```
 
-### Debug toàn bộ state
+### Debug all state
 
 ```json
 { "el": "div", "attr": {}, "innerHTML": "{{webSocket}}" }
@@ -115,11 +109,11 @@ Ngoài khai báo tĩnh ở mục 3, có thể join thêm group bất cứ lúc n
 
 ---
 
-## 6. Gửi tin nhắn — `webSocket_Send`
+## 6. Send — `webSocket_Send`
 
-`webSocket_Send(obj)` nhận **một object** `{ group, data }` — `data` có thể là object, array, hoặc string, hàm tự chọn API SignalR phù hợp (`messageSendObject` / `messageSendArray` / `messageSend`).
+`webSocket_Send(obj)` takes **one object** `{ group, data }`; `data` may be object, array or string — the function picks the SignalR API (`messageSendObject` / `messageSendArray` / `messageSend`).
 
-### Cách 1 — `FUN` + `IN` (payload object)
+### Way 1 — `FUN` + `IN` (object payload)
 
 ```json
 {
@@ -131,13 +125,13 @@ Ngoài khai báo tĩnh ở mục 3, có thể join thêm group bất cứ lúc n
 }
 ```
 
-### Cách 2 — `EXE` raw JS (khi cần đọc giá trị động từ vueData)
+### Way 2 — raw `EXE` (read dynamic vueData values)
 
 ```json
 { "EXE": "webSocket_Send({ group:'nhom2', data:vueData.messText })" }
 ```
 
-### Cách 3 — payload dạng array
+### Way 3 — array payload
 
 ```json
 {
@@ -146,15 +140,15 @@ Ngoài khai báo tĩnh ở mục 3, có thể join thêm group bất cứ lúc n
 }
 ```
 
-### Gọi trực tiếp trong `script.js` (ngoài action engine)
+### Directly in `script.js` (outside the action engine)
 
 ```js
-webSocket_Send({ group: 'Nhom3', data: 'Gui noi dung từ JS' })
+webSocket_Send({ group: "Nhom3", data: "Gui noi dung từ JS" });
 ```
 
-### Cách 4 — Gửi qua HTTP API (không cần client tự giữ kết nối SignalR)
+### Way 4 — HTTP API (no client SignalR connection needed)
 
-FUI cũng expose endpoint REST để gửi tin nhắn tới group mà không cần gọi `webSocket_Send` từ client:
+REST endpoint to send to a group:
 
 ```json
 {
@@ -163,17 +157,17 @@ FUI cũng expose endpoint REST để gửi tin nhắn tới group mà không c
 }
 ```
 
-Group name cũng interpolate được trực tiếp trong URL:
+Group name interpolates in the URL:
 
 ```json
 { "API": "https://ws.fui.vn/api/messageSend/{{DGroup}}" }
 ```
 
-Dùng cách này khi muốn gửi tin nhắn từ một action/nơi không tiện dùng `FUN`/`EXE` (ví dụ gọi từ server, hoặc muốn tách hẳn việc gửi ra khỏi client hiện có kết nối SignalR hay không).
+Use when `FUN`/`EXE` is inconvenient (e.g. server-side sends, or decoupling sending from whether the client holds a SignalR connection).
 
 ---
 
-## 7. Ví dụ đầy đủ (tham khảo)
+## 7. Full example
 
 ```json
 {
@@ -211,7 +205,10 @@ Dùng cách này khi muốn gửi tin nhắn từ một action/nơi không tiệ
               "attr": {
                 "label": "send - nhom2",
                 ":action": [
-                  { "FUN": "webSocket_Send", "IN": { "group": "`nhom1", "data": { "text": "doi tuong 1", "text2": "doi tuong 2" } } },
+                  {
+                    "FUN": "webSocket_Send",
+                    "IN": { "group": "`nhom1", "data": { "text": "doi tuong 1", "text2": "doi tuong 2" } }
+                  },
                   { "EXE": "webSocket_Send({ group:'nhom2', data:vueData.messText})" },
                   { "FUN": "webSocket_Send", "IN": { "group": "`nhom3", "data": ["mang 1", "mang 2"] } }
                 ]
@@ -222,18 +219,38 @@ Dùng cách này khi muốn gửi tin nhắn từ một action/nơi không tiệ
         {
           "prop": "",
           "cols": [
-            { "el": "v-textarea", "col": {}, "attr": { "v-model": "webSocket.nhom2", "label": "Nội dung nhận nhom2", ":required": false, "rows": 5 } }
+            {
+              "el": "v-textarea",
+              "col": {},
+              "attr": { "v-model": "webSocket.nhom2", "label": "Nội dung nhận nhom2", ":required": false, "rows": 5 }
+            }
           ]
         },
-        { "prop": "", "cols": [ { "el": "div", "col": {}, "attr": {}, "innerHTML": "{{webSocket}}" } ] },
+        { "prop": "", "cols": [{ "el": "div", "col": {}, "attr": {}, "innerHTML": "{{webSocket}}" }] },
         {
           "prop": "",
           "cols": [
-            { "el": "f-button", "col": {}, "attr": { "label": "send by API - nhom1", ":action": [ { "API": "https://ws.fui.vn/api/messageSend/nhom1", "IN": { "text": "test 1", "text2": "test 2" } } ] } },
-            { "el": "f-button", "col": {}, "attr": { ":label": "'send by API - ' + DGroup", ":action": [ { "API": "https://ws.fui.vn/api/messageSend/{{DGroup}}" } ] } }
+            {
+              "el": "f-button",
+              "col": {},
+              "attr": {
+                "label": "send by API - nhom1",
+                ":action": [
+                  { "API": "https://ws.fui.vn/api/messageSend/nhom1", "IN": { "text": "test 1", "text2": "test 2" } }
+                ]
+              }
+            },
+            {
+              "el": "f-button",
+              "col": {},
+              "attr": {
+                ":label": "'send by API - ' + DGroup",
+                ":action": [{ "API": "https://ws.fui.vn/api/messageSend/{{DGroup}}" }]
+              }
+            }
           ]
         },
-        { "prop": "", "cols": [ { "el": "div", "col": {}, "attr": {}, "innerHTML": "{{webSocketState}}" } ] }
+        { "prop": "", "cols": [{ "el": "div", "col": {}, "attr": {}, "innerHTML": "{{webSocketState}}" }] }
       ]
     }
   ],
@@ -243,12 +260,12 @@ Dùng cách này khi muốn gửi tin nhắn từ một action/nơi không tiệ
 
 ---
 
-## 8. Checklist khi thêm real-time messaging vào module
+## 8. Checklist
 
-- [ ] `file_import_list` kiểm tra đã có `jquery.signalR-2.4.1.min.js` + `signalr/hubs` chưa
-- [ ] Thiếu → `file_import_new` cả 2, đúng thứ tự sort (signalR trước, hubs sau)
-- [ ] Khai báo `data[].webSocket = { groupName: [] | null | {} }` — chọn kiểu giá trị theo nhu cầu (lịch sử vs. giá trị mới nhất)
-- [ ] Group cần join runtime/điều kiện → `FUN: webSocketJoinGroup` (không dùng được `timeout`/`callBackFunc` qua `IN`, cần thì dùng `EXE`)
-- [ ] Nhận tin: `watch` (key literal, không `{{ }}`) hoặc bind trực tiếp `v-model="webSocket.<group>"`
-- [ ] Gửi tin: `FUN: webSocket_Send` (object/array payload) hoặc `EXE` khi cần đọc `vueData` động, hoặc `API: https://ws.fui.vn/api/messageSend/<group>` nếu muốn gửi qua HTTP thay vì client SignalR
-- [ ] Không quên `vueData.webSocketState` nếu cần hiển thị trạng thái kết nối cho user
+- [ ] `fui import list`: are `jquery.signalR-2.4.1.min.js` + `signalr/hubs` present?
+- [ ] Missing → `fui import new` both, sort order signalR first, hubs second
+- [ ] Declare `data[].webSocket = { groupName: [] | null | {} }` — value type by need (history vs latest)
+- [ ] Runtime/conditional groups → `FUN: webSocketJoinGroup` (no `timeout`/`callBackFunc` via `IN`; use `EXE` if needed)
+- [ ] Receive: `watch` (literal key, no `{{ }}`) or bind `v-model="webSocket.<group>"`
+- [ ] Send: `FUN: webSocket_Send` (object/array), `EXE` for dynamic `vueData`, or `API: https://ws.fui.vn/api/messageSend/<group>` for HTTP instead of client SignalR
+- [ ] Use `vueData.webSocketState` if the user needs to see connection status