mvc-kit 2.12.5 → 2.13.1

package/examples/react/WorkerApp/src/channels/MessagingChannel.ts

@@ -0,0 +1,46 @@
+import { Channel } from 'mvc-kit';
+import { MockWebSocket } from '../mock/MockWebSocket';
+import { MOCK_WORKERS } from '../mock/workers';
+import type { MessageState } from '../types/message';
+
+export interface MessagingMessages {
+  newMessage: MessageState;
+}
+
+export class MessagingChannel extends Channel<MessagingMessages> {
+  static override MAX_ATTEMPTS = 5;
+
+  private ws: MockWebSocket | null = null;
+
+  protected open(signal: AbortSignal): void {
+    this.ws = new MockWebSocket({
+      minInterval: 8000,
+      maxInterval: 20000,
+      generator: () => {
+        const senders = MOCK_WORKERS.filter(w => w.id !== 'w1');
+        const sender = senders[Math.floor(Math.random() * senders.length)]!;
+        const texts = [
+          'Heading to the site now',
+          'Need help with the wiring on floor 2',
+          'Supplies just arrived',
+          'Taking a quick break',
+          'All clear on the safety check',
+          'Can someone cover my shift tomorrow?',
+        ];
+        return {
+          id: `live-${Date.now()}`,
+          conversationId: 'conv1',
+          senderId: sender.id,
+          text: texts[Math.floor(Math.random() * texts.length)]!,
+          sentAt: Date.now(),
+        } satisfies MessageState;
+      },
+    });
+    this.ws.connect((data) => this.receive('newMessage', data), signal);
+  }
+
+  protected close(): void {
+    this.ws?.close();
+    this.ws = null;
+  }
+}

package/examples/react/WorkerApp/src/channels/WorkerStatusChannel.ts

@@ -0,0 +1,35 @@
+import { Channel } from 'mvc-kit';
+import { MockWebSocket } from '../mock/MockWebSocket';
+import { MOCK_WORKERS } from '../mock/workers';
+import type { WorkerState } from '../types/worker';
+
+export interface WorkerStatusMessages {
+  statusChange: { workerId: string; status: WorkerState['status'] };
+}
+
+export class WorkerStatusChannel extends Channel<WorkerStatusMessages> {
+  static override MAX_ATTEMPTS = 5;
+
+  private ws: MockWebSocket | null = null;
+
+  protected open(signal: AbortSignal): void {
+    const statuses: WorkerState['status'][] = ['available', 'on-shift', 'on-break', 'offline'];
+    this.ws = new MockWebSocket({
+      minInterval: 10000,
+      maxInterval: 30000,
+      generator: () => {
+        const worker = MOCK_WORKERS[Math.floor(Math.random() * MOCK_WORKERS.length)]!;
+        return {
+          workerId: worker.id,
+          status: statuses[Math.floor(Math.random() * statuses.length)]!,
+        };
+      },
+    });
+    this.ws.connect((data) => this.receive('statusChange', data), signal);
+  }
+
+  protected close(): void {
+    this.ws?.close();
+    this.ws = null;
+  }
+}

package/examples/react/WorkerApp/src/components/auth/LoginPage.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useSingleton } from 'mvc-kit/react';
+import { AuthViewModel } from '../../viewmodels/AuthViewModel';
+import { MOCK_WORKERS } from '../../mock/workers';
+
+export function LoginPage() {
+  const [authState, authVM] = useSingleton(AuthViewModel);
+  const { loading } = authVM.async.login;
+  const [selectedEmail, setSelectedEmail] = useState(MOCK_WORKERS[0]!.email);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (authState.isAuthenticated) {
+      navigate('/shift');
+    }
+  }, [authState.isAuthenticated, navigate]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    authVM.login(selectedEmail);
+  };
+
+  return (
+    <div className="login-page">
+      <div className="login-card">
+        <h1 className="login-title">WorkerApp</h1>
+        <p className="login-subtitle">
+          Select a worker to log in as
+        </p>
+
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label className="form-label">Worker</label>
+            <select
+              className="form-select"
+              value={selectedEmail}
+              onChange={e => setSelectedEmail(e.target.value)}
+            >
+              {MOCK_WORKERS.map(w => (
+                <option key={w.id} value={w.email}>
+                  {w.name} — {w.role}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <button
+            type="submit"
+            className="btn btn-primary"
+            style={{ width: '100%', marginTop: '0.5rem' }}
+            disabled={loading}
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/examples/react/WorkerApp/src/components/layout/AppShell.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import { useSingleton } from 'mvc-kit/react';
+import { AuthViewModel } from '../../viewmodels/AuthViewModel';
+import { Sidebar } from './Sidebar';
+import { Header } from './Header';
+
+export function AppShell() {
+  const [state, vm] = useSingleton(AuthViewModel);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!state.isAuthenticated) {
+      navigate('/login');
+    }
+  }, [state.isAuthenticated, navigate]);
+
+  if (!state.isAuthenticated || !state.worker) return null;
+
+  return (
+    <div className="app-shell">
+      <Sidebar />
+      <div className="main-area">
+        <Header worker={state.worker} onLogout={() => vm.logout()} />
+        <div className="page-content">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/react/WorkerApp/src/components/layout/Header.tsx

@@ -0,0 +1,23 @@
+import type { WorkerState } from '../../types/worker';
+
+interface HeaderProps {
+  worker: WorkerState;
+  onLogout: () => void;
+}
+
+export function Header({ worker, onLogout }: HeaderProps) {
+  return (
+    <header className="header">
+      <div />
+      <div className="header-user">
+        <span style={{ fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
+          {worker.name}
+        </span>
+        <div className="avatar">{worker.avatar}</div>
+        <button className="btn btn-secondary btn-sm" onClick={onLogout}>
+          Logout
+        </button>
+      </div>
+    </header>
+  );
+}

package/examples/react/WorkerApp/src/components/layout/Sidebar.tsx

@@ -0,0 +1,28 @@
+import { Link, useLocation } from 'react-router-dom';
+
+const navItems = [
+  { path: '/shift', label: 'My Shift' },
+  { path: '/sites', label: 'Work Sites' },
+  { path: '/messaging', label: 'Messaging' },
+];
+
+export function Sidebar() {
+  const { pathname } = useLocation();
+
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-logo">WorkerApp</div>
+      <nav className="sidebar-nav">
+        {navItems.map(item => (
+          <Link
+            key={item.path}
+            to={item.path}
+            className={`sidebar-link ${pathname.startsWith(item.path) ? 'active' : ''}`}
+          >
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  );
+}

package/examples/react/WorkerApp/src/components/messaging/ComposeBar.tsx

@@ -0,0 +1,33 @@
+import { useModel } from 'mvc-kit/react';
+import { ComposeMessageModel } from '../../models/ComposeMessageModel';
+
+interface ComposeBarProps {
+  onSend: (text: string) => void;
+}
+
+export function ComposeBar({ onSend }: ComposeBarProps) {
+  const { state, valid, model } = useModel(
+    () => new ComposeMessageModel({ text: '' }),
+  );
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!valid) return;
+    onSend(state.text);
+    model.setText('');
+  };
+
+  return (
+    <form className="message-compose" onSubmit={handleSubmit}>
+      <input
+        type="text"
+        value={state.text}
+        onChange={e => model.setText(e.target.value)}
+        placeholder="Type a message..."
+      />
+      <button type="submit" className="btn btn-primary" disabled={!valid}>
+        Send
+      </button>
+    </form>
+  );
+}

package/examples/react/WorkerApp/src/components/messaging/ConversationList.tsx

@@ -0,0 +1,59 @@
+import { CardList } from 'mvc-kit/react';
+import type { ConversationDisplay } from '../../viewmodels/ConversationsViewModel';
+
+interface ConversationListProps {
+  conversations: ConversationDisplay[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  search: string;
+  onSearchChange: (value: string) => void;
+}
+
+export function ConversationList({
+  conversations,
+  selectedId,
+  onSelect,
+  search,
+  onSearchChange,
+}: ConversationListProps) {
+  return (
+    <div className="conversation-list">
+      <div className="conversation-list-header">
+        <input
+          className="filter-input"
+          style={{ width: '100%', minWidth: 0 }}
+          type="text"
+          value={search}
+          onChange={e => onSearchChange(e.target.value)}
+          placeholder="Search conversations..."
+        />
+      </div>
+      <div className="conversation-list-items">
+        <CardList
+          items={conversations}
+          keyOf={c => c.id}
+          renderItem={conv => (
+            <div
+              className={`conversation-item ${conv.id === selectedId ? 'selected' : ''}`}
+              onClick={() => onSelect(conv.id)}
+            >
+              <div className="conversation-item-header">
+                <span className="conversation-item-name">{conv.displayName}</span>
+                {conv.unreadCount > 0 && (
+                  <span className="conversation-unread">{conv.unreadCount}</span>
+                )}
+              </div>
+              <div className="conversation-item-preview">{conv.lastMessage}</div>
+            </div>
+          )}
+          renderEmpty={() => (
+            <div className="empty-state" style={{ padding: '1.5rem' }}>
+              No conversations found.
+            </div>
+          )}
+          className="conversation-card-list"
+        />
+      </div>
+    </div>
+  );
+}

package/examples/react/WorkerApp/src/components/messaging/MessageBubble.tsx

@@ -0,0 +1,45 @@
+import type { MessageState } from '../../types/message';
+import type { PendingOperation } from 'mvc-kit';
+
+interface MessageBubbleProps {
+  message: MessageState;
+  isMine: boolean;
+  senderName: string;
+  pendingStatus?: PendingOperation | null;
+  onRetry?: () => void;
+  onDismiss?: () => void;
+}
+
+export function MessageBubble({ message, isMine, senderName, pendingStatus, onRetry, onDismiss }: MessageBubbleProps) {
+  const time = new Date(message.sentAt).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return (
+    <div className={`message-bubble ${isMine ? 'mine' : 'theirs'}`}>
+      {!isMine && <div className="message-sender">{senderName}</div>}
+      <div>{message.text}</div>
+      <div className="message-time">
+        {time}
+        {pendingStatus && (
+          <span className="message-status">
+            {pendingStatus.status === 'active' && ' · Sending...'}
+            {pendingStatus.status === 'retrying' && ` · Retrying (${pendingStatus.attempts}/${pendingStatus.maxRetries})...`}
+            {pendingStatus.status === 'failed' && (
+              <>
+                {' · Failed'}
+                {onRetry && (
+                  <button className="btn-link" onClick={onRetry}>Retry</button>
+                )}
+                {onDismiss && (
+                  <button className="btn-link" onClick={onDismiss}>Dismiss</button>
+                )}
+              </>
+            )}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/examples/react/WorkerApp/src/components/messaging/MessageThread.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useRef } from 'react';
+import { useLocal, useEvent, InfiniteScroll } from 'mvc-kit/react';
+import { MessageThreadViewModel } from '../../viewmodels/MessageThreadViewModel';
+import { MessageBubble } from './MessageBubble';
+import { ComposeBar } from './ComposeBar';
+import { Spinner } from '../shared/Spinner';
+import { PendingBanner } from '../shared/PendingBanner';
+
+interface MessageThreadProps {
+  conversationId: string;
+  currentWorkerId: string;
+  recipientName: string;
+}
+
+export function MessageThread({ conversationId, currentWorkerId, recipientName }: MessageThreadProps) {
+  const [, vm] = useLocal(MessageThreadViewModel, {});
+  const { loading } = vm.async.loadConversation;
+  const loadingMore = vm.async.loadOlderMessages.loading;
+  const messagesRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    vm.loadConversation(conversationId);
+  }, [conversationId, vm]);
+
+  useEvent(vm, 'messageSent', () => {
+    setTimeout(() => {
+      if (messagesRef.current) {
+        messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
+      }
+    }, 50);
+  });
+
+  const messages = vm.sortedMessages;
+
+  return (
+    <div className="message-thread">
+      <div className="message-thread-header">
+        Messages
+        {vm.hasPendingMessages && (
+          <span className="badge badge-maintenance" style={{ marginLeft: '0.5rem' }}>
+            Sending...
+          </span>
+        )}
+      </div>
+
+      <PendingBanner
+        pending={vm.pending}
+        label="messages"
+        renderEntry={entry => (
+          <span>To {entry.meta?.recipientName}: "{entry.meta?.preview}" — {entry.error}</span>
+        )}
+      />
+
+      <div className="message-thread-messages" ref={messagesRef}>
+        {loading && <Spinner />}
+        {!loading && (
+          <InfiniteScroll
+            hasMore={vm.feed.hasMore}
+            loading={loadingMore}
+            onLoadMore={() => vm.loadOlderMessages()}
+            direction="up"
+            renderLoading={() => (
+              <div className="spinner-center"><div className="spinner" /></div>
+            )}
+            renderEnd={() => (
+              <div className="feed-end">Beginning of conversation</div>
+            )}
+          >
+            {messages.map(msg => {
+              const pendingStatus = vm.pending.getStatus(msg.id);
+              return (
+                <MessageBubble
+                  key={msg.id}
+                  message={msg}
+                  isMine={msg.senderId === currentWorkerId}
+                  senderName={vm.getSenderName(msg.senderId)}
+                  pendingStatus={pendingStatus}
+                  onRetry={pendingStatus?.status === 'failed' ? () => vm.retryMessage(msg.id) : undefined}
+                  onDismiss={pendingStatus?.status === 'failed' ? () => vm.dismissMessage(msg.id) : undefined}
+                />
+              );
+            })}
+          </InfiniteScroll>
+        )}
+        {!loading && messages.length === 0 && (
+          <div className="empty-state">No messages yet.</div>
+        )}
+      </div>
+
+      <ComposeBar onSend={(text) => vm.sendMessage(conversationId, text, recipientName)} />
+    </div>
+  );
+}

package/examples/react/WorkerApp/src/components/messaging/MessagingPage.tsx

@@ -0,0 +1,53 @@
+import { useLocal, useSingleton } from 'mvc-kit/react';
+import { ConversationsViewModel } from '../../viewmodels/ConversationsViewModel';
+import { AuthViewModel } from '../../viewmodels/AuthViewModel';
+import { ConversationList } from './ConversationList';
+import { MessageThread } from './MessageThread';
+import { Spinner } from '../shared/Spinner';
+import { ErrorBanner } from '../shared/ErrorBanner';
+
+export function MessagingPage() {
+  const [authState] = useSingleton(AuthViewModel);
+  const [state, vm] = useLocal(ConversationsViewModel, {
+    search: '',
+    selectedId: null,
+    currentWorkerId: '',
+  });
+  const { loading, error } = vm.async.load;
+
+  const currentWorkerId = authState.worker?.id ?? '';
+
+  return (
+    <div>
+      <h1 className="page-title">Messaging</h1>
+
+      {error && <ErrorBanner message={error} />}
+
+      <div className="messaging-layout">
+        {loading ? (
+          <Spinner />
+        ) : (
+          <ConversationList
+            conversations={vm.filtered}
+            selectedId={state.selectedId}
+            onSelect={id => vm.selectConversation(id)}
+            search={state.search}
+            onSearchChange={v => vm.setSearch(v)}
+          />
+        )}
+
+        {state.selectedId ? (
+          <MessageThread
+            conversationId={state.selectedId}
+            currentWorkerId={currentWorkerId}
+            recipientName={vm.selected?.displayName ?? ''}
+          />
+        ) : (
+          <div className="message-thread-empty">
+            Select a conversation to start messaging
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/examples/react/WorkerApp/src/components/shared/ErrorBanner.tsx

@@ -0,0 +1,3 @@
+export function ErrorBanner({ message }: { message: string }) {
+  return <div className="error-banner">{message}</div>;
+}

package/examples/react/WorkerApp/src/components/shared/PendingBanner.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import type { Pending, PendingEntry } from 'mvc-kit';
+
+interface PendingBannerProps {
+  pending: Pending<string, any>;
+  label?: string;
+  renderEntry?: (entry: PendingEntry<string, any>) => ReactNode;
+}
+
+export function PendingBanner({ pending, label = 'operations', renderEntry }: PendingBannerProps) {
+  if (!pending.hasFailed) return null;
+
+  const failedEntries = pending.entries.filter(e => e.status === 'failed');
+
+  return (
+    <div className="pending-banner">
+      <div className="pending-banner-info">
+        <span>{pending.failedCount} failed {label}</span>
+        {renderEntry && failedEntries.length > 0 && (
+          <ul className="pending-banner-list">
+            {failedEntries.map(entry => (
+              <li key={entry.id}>{renderEntry(entry)}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+      <div className="pending-banner-actions">
+        <button className="btn btn-sm btn-primary" onClick={() => pending.retryAll()}>
+          Retry All
+        </button>
+        <button className="btn btn-sm btn-secondary" onClick={() => pending.dismissAll()}>
+          Dismiss All
+        </button>
+      </div>
+    </div>
+  );
+}

package/examples/react/WorkerApp/src/components/shared/Spinner.tsx

@@ -0,0 +1,7 @@
+export function Spinner({ large }: { large?: boolean }) {
+  return (
+    <div className="spinner-center">
+      <div className={`spinner ${large ? 'spinner-lg' : ''}`} />
+    </div>
+  );
+}

package/examples/react/WorkerApp/src/components/shared/Toast.tsx

@@ -0,0 +1,41 @@
+import { useState, useCallback } from 'react';
+import { useSingleton } from 'mvc-kit/react';
+import { useEvent } from 'mvc-kit/react';
+import { AppEventBus } from '../../events/AppEventBus';
+
+interface ToastItem {
+  id: number;
+  message: string;
+  severity: 'success' | 'error' | 'info';
+}
+
+let nextId = 0;
+
+export function Toast() {
+  const bus = useSingleton(AppEventBus);
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  const addToast = useCallback((item: Omit<ToastItem, 'id'>) => {
+    const id = nextId++;
+    setToasts(prev => [...prev, { ...item, id }]);
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id));
+    }, 3000);
+  }, []);
+
+  useEvent(bus, 'toast:show', ({ message, severity }) => {
+    addToast({ message, severity });
+  });
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="toast-container">
+      {toasts.map(t => (
+        <div key={t.id} className={`toast toast-${t.severity}`}>
+          {t.message}
+        </div>
+      ))}
+    </div>
+  );
+}