fix(web): remove demo delay and harden bridge recovery

Author: JasonTM17

.gitignore

@@ -27,6 +27,7 @@ web/test-results/
 
 # App data
 *.log
+logs/current-hardware-bridge-url.txt
 *.db
 *.sqlite
 *.sqlite3

scripts/start_public_hardware_bridge.ps1

@@ -77,6 +77,46 @@ function Test-PortBusy {
   return $null -ne (Get-NetTCPConnection -LocalPort $Port -State Listen -ErrorAction SilentlyContinue | Select-Object -First 1)
 }
 
+function Resolve-CloudflaredExecutable {
+  param([string]$Candidate)
+  $command = Get-Command $Candidate -ErrorAction SilentlyContinue
+  if ($null -ne $command) {
+    return $command.Source
+  }
+  $knownPaths = @(
+    (Join-Path ${env:ProgramFiles(x86)} "cloudflared\cloudflared.exe"),
+    (Join-Path $env:ProgramFiles "cloudflared\cloudflared.exe"),
+    (Join-Path $env:LOCALAPPDATA "Microsoft\WinGet\Links\cloudflared.exe")
+  )
+  $installed = $knownPaths | Where-Object { $_ -and (Test-Path -LiteralPath $_) } | Select-Object -First 1
+  if ($installed) {
+    return $installed
+  }
+  throw "cloudflared was not found. Install Cloudflare Tunnel, then rerun this script."
+}
+
+function Save-CurrentTunnelUrl {
+  param([int]$WaitSeconds = 15)
+  $deadline = (Get-Date).AddSeconds($WaitSeconds)
+  $pattern = "https://[-a-z0-9]+\.trycloudflare\.com"
+  while ((Get-Date) -lt $deadline) {
+    if (Test-Path -LiteralPath $err) {
+      $match = Select-String -Path $err -Pattern $pattern | Select-Object -Last 1
+      if ($match) {
+        $urlMatch = [Regex]::Match($match.Line, $pattern)
+        if ($urlMatch.Success) {
+          $currentUrl = $urlMatch.Value
+          Set-Content -LiteralPath (Join-Path $LogDir "current-hardware-bridge-url.txt") -Value $currentUrl -Encoding UTF8
+          Write-Host "Hardware bridge URL: $currentUrl"
+          return
+        }
+      }
+    }
+    Start-Sleep -Milliseconds 500
+  }
+  Write-Warning "Tunnel started but its public URL was not found within $WaitSeconds seconds. Check $err."
+}
+
 function Get-PortOwnerPid {
   param([int]$Port)
   $conn = Get-NetTCPConnection -LocalPort $Port -State Listen -ErrorAction SilentlyContinue | Select-Object -First 1
@@ -93,7 +133,14 @@ function Test-RepoAgentProcess {
     return $false
   }
   $rootPattern = [Regex]::Escape([string]$Root)
-  return $proc.CommandLine -match "scripts[/\\]run_agent\.py" -and $proc.CommandLine -match $rootPattern
+  if ($proc.CommandLine -notmatch "scripts[/\\]run_agent\.py") {
+    return $false
+  }
+  if ($proc.CommandLine -match $rootPattern -or $proc.ExecutablePath -match $rootPattern) {
+    return $true
+  }
+  $parent = Get-CimInstance Win32_Process -Filter "ProcessId = $($proc.ParentProcessId)" -ErrorAction SilentlyContinue
+  return $null -ne $parent -and $parent.CommandLine -match $rootPattern
 }
 
 function Start-Agent {
@@ -156,9 +203,7 @@ if (-not $NoAgentStart) {
   $ownerPid = Get-PortOwnerPid $AgentPort
   if ($null -ne $ownerPid) {
     if (Test-RepoAgentProcess $ownerPid) {
-      Stop-Process -Id $ownerPid -Force
-      Start-Sleep -Seconds 2
-      Start-Agent
+      Write-Host "Repo agent already running on port $AgentPort (PID $ownerPid)."
     } else {
       throw "Port $AgentPort is busy by PID $ownerPid and is not this repo agent."
     }
@@ -171,24 +216,29 @@ if (-not (Test-PortBusy $AgentPort)) {
   throw "Local agent is not listening on port $AgentPort."
 }
 
-$cloudflared = Get-Command $CloudflaredPath -ErrorAction SilentlyContinue
-if ($null -eq $cloudflared) {
-  throw "cloudflared was not found. Install Cloudflare Tunnel, then rerun this script."
-}
+$cloudflared = Resolve-CloudflaredExecutable $CloudflaredPath
 
 Start-SupabaseStateBridge
 
 $out = Join-Path $LogDir "public-hardware-bridge.out.log"
 $err = Join-Path $LogDir "public-hardware-bridge.err.log"
 $url = "http://127.0.0.1:$AgentPort"
+$existingTunnel = Get-CimInstance Win32_Process -ErrorAction SilentlyContinue |
+  Where-Object { $_.Name -eq "cloudflared.exe" -and $_.CommandLine -match [Regex]::Escape($url) } |
+  Select-Object -First 1
+if ($null -ne $existingTunnel) {
+  Write-Host "Cloudflare Tunnel already running (PID $($existingTunnel.ProcessId))."
+  Save-CurrentTunnelUrl -WaitSeconds 2
+  exit 0
+}
 Start-Process `
-  -FilePath $cloudflared.Source `
+  -FilePath $cloudflared `
   -ArgumentList @("tunnel", "--url", $url) `
   -WorkingDirectory $Root `
   -RedirectStandardOutput $out `
   -RedirectStandardError $err `
   -WindowStyle Hidden
 
 Write-Host "Started Cloudflare Tunnel for $url"
-Write-Host "Watch $err for the generated https://*.trycloudflare.com URL."
+Save-CurrentTunnelUrl
 Write-Host "Set that URL as TRASH_SORTER_HARDWARE_BRIDGE_URL in Vercel production."

scripts/supabase_hardware_bridge.py

@@ -41,13 +41,22 @@ def main() -> int:
     if not database_url:
         raise SystemExit(f"Set {SUPABASE_DB_ENV} to the Supabase pooled/direct Postgres URL.")
 
+    retry_delay = max(1.0, args.interval)
     while True:
-        with psycopg.connect(database_url, autocommit=False, prepare_threshold=None) as conn:
-            sync_once(conn, args.operations_db, args.history_db, args.history_limit)
-            conn.commit()
-        if args.once:
-            return 0
-        time.sleep(max(1.0, args.interval))
+        try:
+            with psycopg.connect(database_url, autocommit=False, prepare_threshold=None) as conn:
+                sync_once(conn, args.operations_db, args.history_db, args.history_limit)
+                conn.commit()
+            retry_delay = max(1.0, args.interval)
+            if args.once:
+                return 0
+            time.sleep(retry_delay)
+        except psycopg.Error as exc:
+            if args.once:
+                raise
+            LOGGER.warning("Supabase sync failed; retrying in %.1fs: %s", retry_delay, exc)
+            time.sleep(retry_delay)
+            retry_delay = min(30.0, retry_delay * 2)
 
 
 def sync_once(conn: psycopg.Connection[Any], operations_db: Path, history_db: Path, history_limit: int) -> None:

web/src/components/dashboard-client.tsx

@@ -689,10 +689,15 @@ export function DashboardClient() {
       return;
     }
     const hasDanger = freshAlerts.some((alert) => alert.severity === "danger");
+    const uniqueMessages = [...new Set(freshAlerts.map((alert) => alert.message || alert.title))];
+    const visibleMessages = uniqueMessages.slice(0, 5);
+    if (uniqueMessages.length > visibleMessages.length) {
+      visibleMessages.push(`Còn ${uniqueMessages.length - visibleMessages.length} cảnh báo khác trên bản đồ.`);
+    }
     setBinFullPopup({
       title: hasDanger ? "Có thùng rác đã đầy" : "Có thùng rác gần đầy",
       severity: hasDanger ? "danger" : "warning",
-      messages: freshAlerts.map((alert) => alert.message || alert.title)
+      messages: visibleMessages
     });
     setNotice(freshAlerts[0].message || freshAlerts[0].title);
   }
@@ -1631,6 +1636,31 @@ export function DashboardClient() {
     normalizedSearch
   ]);
 
+  useEffect(() => {
+    if (auth?.role !== "admin" || auth.password_default || !agentToken || !USE_CLOUD_HARDWARE_BRIDGE) {
+      return;
+    }
+    let cancelled = false;
+    let checking = false;
+    const checkBridge = async () => {
+      if (cancelled || checking || document.visibilityState === "hidden") return;
+      checking = true;
+      try {
+        await fetchHardware<RuntimeStatus>("/api/status?include_devices=false", { timeoutMs: 6000 });
+      } catch {
+        // fetchHardware updates the connection card state.
+      } finally {
+        checking = false;
+      }
+    };
+    void checkBridge();
+    const timer = window.setInterval(() => void checkBridge(), 10_000);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, [agentToken, auth?.role, auth?.password_default]);
+
   useEffect(() => {
     const savedToken = window.localStorage.getItem(SESSION_TOKEN_KEY) ?? "";
     const savedChatbot = window.localStorage.getItem(USER_CHATBOT_ENABLED_KEY);

web/src/components/operations-bin-map.tsx

@@ -752,7 +752,7 @@ function BinFillRow({
           onClick={onSelectDemoBin}
           type="button"
         >
-          {pending ? "Đang chọn..." : selected ? "Đã chọn" : "Chọn"}
+          {selected ? (pending ? "Đã chọn · Đang lưu" : "Đã chọn") : pending ? "Đang lưu" : "Chọn"}
         </button>
       ) : null}
     </div>

web/src/lib/server/cloud-operations.ts

@@ -90,6 +90,7 @@ type BinRow = QueryResultRow & {
   status: string | null;
   active: boolean | number;
   updated_at: Date | string | null;
+  station_name?: string | null;
 };
 
 type AlertRow = QueryResultRow & {
@@ -421,33 +422,22 @@ export async function cloudSetDemoHardwareTarget(
   }
 
   const ownerFilter = identity.role === "admin" ? text(payload.owner_username) : identity.username;
-  const targetScope = await pool().query<{
-    assigned_owner_username: string;
-    bin_id: string;
-    bin_index: number | string;
-  }>(
-    `select station.assigned_owner_username, bin.bin_id, bin.bin_index
+  const result = await pool().query<DemoHardwareTargetRow>(
+    `insert into public.demo_hardware_targets
+       (owner_username, station_id, bin_id, bin_index, selected_by, selected_at, active)
+     select station.assigned_owner_username, station.station_id, bin.bin_id, bin.bin_index,
+            $5, now(), true
        from public.bin_stations station
        join public.bins bin on bin.station_id = station.station_id
       where station.station_id = $1
         and bin.bin_index = $2
         and ($3::text = '' or bin.bin_id = $3)
         and ($4::text = '' or station.assigned_owner_username = $4)
+        and nullif(station.assigned_owner_username, '') is not null
         and coalesce(station.active::text, '') not in ('0', 'false', 'f', 'no', '')
         and coalesce(bin.active::text, '') not in ('0', 'false', 'f', 'no', '')
       order by bin.bin_id
-      limit 1`,
-    [stationId, binIndex, requestedBinId, ownerFilter]
-  );
-  const scopedTarget = targetScope.rows[0];
-  if (!scopedTarget?.assigned_owner_username) {
-    return null;
-  }
-
-  const result = await pool().query<DemoHardwareTargetRow>(
-    `insert into public.demo_hardware_targets
-       (owner_username, station_id, bin_id, bin_index, selected_by, selected_at, active)
-     values ($1, $2, $3, $4, $5, now(), true)
+      limit 1
      on conflict (owner_username) do update set
        station_id = excluded.station_id,
        bin_id = excluded.bin_id,
@@ -456,10 +446,13 @@ export async function cloudSetDemoHardwareTarget(
        selected_at = excluded.selected_at,
        active = true
      returning owner_username, station_id, bin_id, bin_index, selected_by, selected_at, active`,
-    [scopedTarget.assigned_owner_username, stationId, scopedTarget.bin_id, binIndex, identity.username]
+    [stationId, binIndex, requestedBinId, ownerFilter, identity.username]
   );
 
   const target = result.rows[0];
+  if (!target) {
+    return null;
+  }
   return {
     ok: true,
     target: {
@@ -636,8 +629,10 @@ async function derivedFullnessAlerts(ownerUsername: string, stationIds: string[]
   const result = await pool().query<BinRow>(
     `select (row_number() over (order by b.station_id, b.bin_index))::int as id,
             b.bin_id, b.station_id, b.command, b.bin_index, b.label,
-            ${fillExpr} as fill_percent, b.status, b.active, b.updated_at
+            ${fillExpr} as fill_percent, b.status, b.active, b.updated_at,
+            station.name as station_name
        from public.bins b
+       join public.bin_stations station on station.station_id = b.station_id
       where ${where.join(" and ")}
       order by ${fillExpr} desc, b.updated_at desc`,
     values
@@ -655,7 +650,7 @@ async function derivedFullnessAlerts(ownerUsername: string, stationIds: string[]
       device_id: "",
       severity: danger ? "danger" : "warning",
       title: danger ? "\u0054\u0068\u00f9\u006e\u0067\u0020\u0072\u00e1\u0063\u0020\u0111\u00e3\u0020\u0111\u1ea7\u0079" : "\u0054\u0068\u00f9\u006e\u0067\u0020\u0072\u00e1\u0063\u0020\u0067\u1ea7\u006e\u0020\u0111\u1ea7\u0079",
-      message: `\u0054\u0068\u00f9\u006e\u0067 ${label} ${danger ? "\u0111\u00e3\u0020\u0111\u1ea7\u0079" : "\u0067\u1ea7\u006e\u0020\u0111\u1ea7\u0079"} ${Math.round(fill)}%.`,
+      message: `${row.station_name || row.station_id}: \u0054\u0068\u00f9\u006e\u0067 ${label} ${danger ? "\u0111\u00e3\u0020\u0111\u1ea7\u0079" : "\u0067\u1ea7\u006e\u0020\u0111\u1ea7\u0079"} ${Math.round(fill)}%.`,
       status: "open",
       source: "derived_fullness",
       created_at: iso(row.updated_at) || now,

web/tests/unit/demo-bin-target.test.ts

@@ -19,9 +19,7 @@ describe("demo hardware target hot path", () => {
     vi.stubEnv("TRASH_SORTER_DEMO_HARDWARE_TARGET", "1");
     vi.stubEnv("TRASH_SORTER_AUTH_DATABASE_URL", "postgresql://test:test@localhost/test");
     query.mockReset();
-    query
-      .mockResolvedValueOnce({ rows: [{ assigned_owner_username: "alice", bin_id: "station-a-I", bin_index: 3 }] })
-      .mockResolvedValueOnce({ rows: [{
+    query.mockResolvedValueOnce({ rows: [{
         owner_username: "alice",
         station_id: "station-a",
         bin_id: "station-a-I",
@@ -38,7 +36,7 @@ describe("demo hardware target hot path", () => {
     delete globalThis.trashSorterCloudOperationsPool;
   });
 
-  it("uses two scoped queries and ignores a forged User owner", async () => {
+  it("uses one scoped upsert and ignores a forged User owner", async () => {
     const result = await cloudSetDemoHardwareTarget(USER, {
       station_id: "station-a",
       bin_id: "station-a-I",
@@ -47,8 +45,8 @@ describe("demo hardware target hot path", () => {
     });
 
     expect(result).toMatchObject({ ok: true, target: { owner_username: "alice", bin_index: 3 } });
-    expect(query).toHaveBeenCalledTimes(2);
+    expect(query).toHaveBeenCalledTimes(1);
     expect(query.mock.calls.map(([sql]) => String(sql)).join("\n")).not.toMatch(/create table|create index/i);
-    expect(query.mock.calls[0][1]).toEqual(["station-a", 3, "station-a-I", "alice"]);
+    expect(query.mock.calls[0][1]).toEqual(["station-a", 3, "station-a-I", "alice", "alice"]);
   });
 });