fix(web): add re-authenticate flow, safe URL parsing, and minor UI fixes

packages/web/src/components/modals/ConnectedInstances.tsx

@@ -2,11 +2,16 @@ import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import type { InstanceInfoResponse, FederationRegistryEntry } from '@backspace/shared';
 import { useInstanceStore, DifferentPasswordError } from '../../stores/instanceStore';
-import type { ConnectedInstance } from '../../stores/instanceStore';
 import { useAuthStore } from '../../stores/authStore';
 import { isElectron } from '../../platform/platform';
 import { ConfirmDialog } from '../ui/ConfirmDialog';
 
+// ─── URL helpers ─────────────────────────────────────────────────────────────
+
+function safeHost(origin: string): string {
+  try { return new URL(origin).host; } catch { return origin; }
+}
+
 // ─── Status indicator ────────────────────────────────────────────────────────
 
 function StatusDot({ status }: { status: string }) {
@@ -546,11 +551,16 @@ function RegistryRow({
   const disconnectInstance = useInstanceStore((s) => s.disconnectInstance);
   const reconnectInstance = useInstanceStore((s) => s.reconnectInstance);
   const forceRemoveEntry = useInstanceStore((s) => s.forceRemoveEntry);
+  const reauthenticateInstance = useInstanceStore((s) => s.reauthenticateInstance);
 
   const [showForceRemoveConfirm, setShowForceRemoveConfirm] = useState(false);
   const [showDeleteIdentity, setShowDeleteIdentity] = useState(false);
+  const [showReauth, setShowReauth] = useState(false);
+  const [reauthPassword, setReauthPassword] = useState('');
+  const [reauthLoading, setReauthLoading] = useState(false);
+  const [reauthError, setReauthError] = useState('');
 
-  const name = entry.label || new URL(entry.origin).host;
+  const name = entry.label || safeHost(entry.origin);
   const isDisconnected = entry.status === 'disconnected';
   const isConnected = entry.status === 'connected';
   const hasIssue = entry.status === 'unreachable' || entry.status === 'auth_expired';
@@ -592,6 +602,21 @@ function RegistryRow({
     setShowForceRemoveConfirm(false);
   };
 
+  const handleReauth = async () => {
+    if (!reauthPassword) return;
+    setReauthError('');
+    setReauthLoading(true);
+    try {
+      await reauthenticateInstance(entry.origin, reauthPassword);
+      setShowReauth(false);
+      setReauthPassword('');
+    } catch (err) {
+      setReauthError((err as Error).message);
+    } finally {
+      setReauthLoading(false);
+    }
+  };
+
   return (
     <>
       <div className={`bg-white/[0.02] rounded-md transition-colors ${isDisconnected ? 'opacity-70' : ''} ${expanded ? 'border border-white/[0.06]' : ''}`}>
@@ -610,7 +635,7 @@ function RegistryRow({
                 </span>
               </div>
               <div className="text-[11px] text-txt-tertiary truncate">
-                {new URL(entry.origin).host}
+                {safeHost(entry.origin)}
                 {entry.username && (
                   <span className="ml-1">as {entry.username}</span>
                 )}
@@ -661,6 +686,44 @@ function RegistryRow({
                 </div>
               )}
 
+              {/* Re-auth inline form */}
+              {showReauth && (
+                <form onSubmit={(e) => { e.preventDefault(); handleReauth(); }} className="mt-3 space-y-2">
+                  <input type="text" autoComplete="username" value={entry.username ?? ''} readOnly tabIndex={-1} className="sr-only" />
+                  <div className="flex gap-2">
+                    <input
+                      type="password"
+                      value={reauthPassword}
+                      onChange={(e) => setReauthPassword(e.target.value)}
+                      placeholder="Your account password"
+                      className="input-standard flex-1 py-1.5"
+                      disabled={reauthLoading}
+                      autoFocus
+                      autoComplete="current-password"
+                    />
+                    <button
+                      type="submit"
+                      disabled={reauthLoading || !reauthPassword}
+                      className="px-3 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-xs font-medium rounded transition-colors disabled:opacity-50"
+                    >
+                      {reauthLoading ? 'Connecting...' : 'Connect'}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => { setShowReauth(false); setReauthPassword(''); setReauthError(''); }}
+                      className="px-2 py-1.5 text-xs text-txt-tertiary hover:text-txt-secondary transition-colors"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                  {reauthError && (
+                    <div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs">
+                      {reauthError}
+                    </div>
+                  )}
+                </form>
+              )}
+
               {/* Actions */}
               <div className="flex items-center gap-2 flex-wrap">
                 {isConnected && (
@@ -694,6 +757,13 @@ function RegistryRow({
                         Reconnect
                       </button>
                     )}
+                    <button
+                      type="button"
+                      onClick={(e) => { e.stopPropagation(); setShowReauth((v) => !v); }}
+                      className="px-3 py-1.5 text-xs font-medium bg-accent-amber/15 text-accent-amber hover:bg-accent-amber/25 rounded transition-colors"
+                    >
+                      Re-authenticate
+                    </button>
                     <button
                       type="button"
                       onClick={(e) => { e.stopPropagation(); setShowDeleteIdentity(true); }}
@@ -715,6 +785,15 @@ function RegistryRow({
                         Reconnect
                       </button>
                     )}
+                    {entry.status === 'auth_expired' && (
+                      <button
+                        type="button"
+                        onClick={(e) => { e.stopPropagation(); setShowReauth((v) => !v); }}
+                        className="px-3 py-1.5 text-xs font-medium bg-accent-amber/15 text-accent-amber hover:bg-accent-amber/25 rounded transition-colors"
+                      >
+                        Re-authenticate
+                      </button>
+                    )}
                     <button
                       type="button"
                       onClick={(e) => { e.stopPropagation(); setShowForceRemoveConfirm(true); }}
@@ -745,7 +824,7 @@ function RegistryRow({
         title="Force Remove Entry"
         description={`This will remove the registry entry for ${name}. The remote instance will not be notified. Use this only if the instance is permanently unreachable.`}
         confirmLabel="Force Remove"
-        variant="danger"
+        variant="warning"
       />
 
       {/* Delete Identity dialog */}
@@ -766,8 +845,8 @@ function sortEntries(entries: FederationRegistryEntry[], sortBy: SortBy): Federa
   return [...entries].sort((a, b) => {
     switch (sortBy) {
       case 'name': {
-        const nameA = (a.label || new URL(a.origin).host).toLowerCase();
+        const nameA = (a.label || safeHost(a.origin)).toLowerCase();
-        const nameB = (b.label || new URL(b.origin).host).toLowerCase();
+        const nameB = (b.label || safeHost(b.origin)).toLowerCase();
         return nameA.localeCompare(nameB);
       }
       case 'dateAdded':
@@ -789,7 +868,7 @@ export function ConnectedInstances() {
 
   const [showAddForm, setShowAddForm] = useState(false);
   const [filter, setFilter] = useState<StatusFilter>('all');
-  const [sortBy, setSortBy] = useState<SortBy>('name');
+  const [sortBy, setSortBy] = useState<SortBy>('dateAdded');
   const [expandedOrigins, setExpandedOrigins] = useState<Set<string>>(new Set());
 
   const toggleExpand = (origin: string) => {