feat(web): discord-style chat, members pane, invitations and optimistic send [CI]

- chat: left-aligned discord-style messages with grouped senders, hover
  actions, an auto-growing composer and file cards
- send: render messages and files locally first and replace the
  placeholder when the worker publishes the real item; failures keep the
  text with a retry action
- navigation: space rail plus a flatter channel list with the space name
  header and collapsible groups
- members: right pane tabs (files / members) grouped by online, offline
  and pending users, with a prominent invite action and a top bar shortcut
- notifications: toast host for invite results; invitees get a toast with
  an accept action, and the invitation payload now carries the space name
  and inviter inside the encrypted grant
- users over devices: drop device names, the device list and device
  rename/release; senders show the account (guests show as guest) and the
  share panel only keeps links
- follow contract 7.0.0 (max_members, members_used, members_full, /join)
- docs: ui-design and frontend updated for the new layout and concepts

web/src/features/home/AccountDevices.tsx

@@ -26,7 +26,7 @@ export function AccountDevices() {
     <div className={styles.sectionHeader}><strong>我的设备</strong>
       <Button variant="ghost" disabled={busy} onClick={() => { void refresh().catch(() => setError('设备清单读取失败')); }}>刷新设备</Button>
     </div>
-    <p className={styles.note}>同一账号可登录多台设备。移除设备会撤销它的登录与空间席位，保留账号的空间成员资格。</p>
+    <p className={styles.note}>同一账号可登录多台设备。移除设备只会撤销它的登录，不影响账号在各空间里的成员身份。</p>
     {devices.map((device) => <div className={styles.deviceRow} key={device.id}>
       <label className={styles.deviceName}>
         <input aria-label={`${device.name} 的设备名称`} maxLength={80} value={names[device.id] ?? device.name} onChange={(e) => setNames((values) => ({ ...values, [device.id]: e.target.value }))} />

web/src/features/home/AccountDock.module.css

@@ -1,8 +1,8 @@
 .dock {
   position: fixed;
   z-index: 24;
-  left: max(var(--space-4), env(safe-area-inset-left));
-  bottom: max(var(--space-4), env(safe-area-inset-bottom));
+  left: max(var(--space-2), env(safe-area-inset-left));
+  bottom: max(var(--space-2), env(safe-area-inset-bottom));
   display: flex;
   align-items: center;
   gap: var(--space-2);

web/src/features/home/ChannelList.tsx

@@ -46,7 +46,7 @@ export function ChannelList({ kind, title, onOpen }: Props) {
                       {c.mode === 'enc' ? <><Icon name="lock" size={12} /> 加密</> : '明文'}
                     </span>
                     <span>{c.role === 'owner' ? '所有者' : '成员'}</span>
-                    <span>最多 {c.seats} 人</span>
+                    <span>最多 {c.maxMembers} 人</span>
                     <span>{formatAgo(c.createdAt)}创建</span>
                   </>
                 )}

web/src/features/home/CreateSheet.tsx

@@ -48,7 +48,7 @@ function CreateForm({ onClose, onCreated, info }: Props & { info: ServerInfoBody
       <div className={styles.form}>
         <label className={styles.field}>
           <span>空间名称(加入者和服务端可见)</span>
-          <input type="text" value={opts.name ?? ''} placeholder="例如：工作设备" onChange={(e) => set('name', e.target.value)} />
+          <input type="text" value={opts.name ?? ''} placeholder="例如：项目组" onChange={(e) => set('name', e.target.value)} />
         </label>
 
         <label className={styles.check}><input type="checkbox" checked={opts.mode === 'enc'} onChange={(event) => set('mode', event.target.checked ? 'enc' : 'raw')} /><span>启用端到端加密</span></label>
@@ -57,8 +57,8 @@ function CreateForm({ onClose, onCreated, info }: Props & { info: ServerInfoBody
 
         <label className={styles.field}>
           <span>成员人数上限</span>
-          <select value={opts.seats} onChange={(e) => set('seats', Number(e.target.value))}>
-            {info.choices.seats.map((n) => <option key={n} value={n}>{n} 人</option>)}
+          <select value={opts.maxMembers} onChange={(e) => set('maxMembers', Number(e.target.value))}>
+            {info.choices.max_members.map((n) => <option key={n} value={n}>{n} 人</option>)}
           </select>
         </label>
 

web/src/features/home/InvitationInbox.tsx

@@ -20,7 +20,7 @@ export function InvitationInbox() {
       <Button variant="ghost" disabled={Boolean(busy)} onClick={() => { void accountApi.invitations().then(setInvitations).catch(() => setError('读取邀请失败')); }}>刷新</Button>
     </div>
     {invitations.length === 0 ? <p className={styles.note}>暂无邀请。</p> : invitations.map((row) => <div className={styles.invitationRow} key={row.channel_id}>
-      <span>空间 {row.channel_id.slice(0, 8)}…</span><Button disabled={Boolean(busy)} onClick={() => { void accept(row.channel_id); }}>{busy === row.channel_id ? '加入中…' : '接受邀请'}</Button>
+      <span>{row.channelName || `空间 ${row.channel_id.slice(0, 8)}…`}{row.invitedBy ? ` · 邀请人 ${row.invitedBy}` : ''}</span><Button disabled={Boolean(busy)} onClick={() => { void accept(row.channel_id); }}>{busy === row.channel_id ? '加入中…' : '接受邀请'}</Button>
     </div>)}
     {error ? <p className={styles.error} role="alert">{error}</p> : null}
   </div>;