feat(frontend): translate UI to English and refresh layout styles

src/pages/ChatPage.tsx

@@ -127,7 +127,7 @@ export default function ChatPage() {
       setMessages(res.data.items ?? [])
       setPageInfo(res.data.page ?? null)
     } catch {
-      setError('消息拉取失败')
+      setError('Failed to load messages')
     } finally {
       setLoading(false)
     }
@@ -144,7 +144,7 @@ export default function ChatPage() {
       socket?.emit('typing.stop', { channelId })
       setContent('')
     } catch {
-      setError('发送失败')
+      setError('Failed to send message')
     }
   }
 
@@ -158,7 +158,7 @@ export default function ChatPage() {
       setEditingContent('')
       await pullMessages()
     } catch {
-      setError('编辑失败')
+      setError('Failed to edit message')
     }
   }
 
@@ -169,7 +169,7 @@ export default function ChatPage() {
       await guildApi().delete(`/channels/${channelId}/messages/${messageId}`)
       await pullMessages()
     } catch {
-      setError('删除失败')
+      setError('Failed to delete message')
     }
   }
 
@@ -201,41 +201,44 @@ export default function ChatPage() {
   }, [channelId, socket, socketState])
 
   return (
-    <section>
-      <h2>聊天</h2>
-      <p>Guild: {guildId || '-'}</p>
-      <p>Socket: {socketState}</p>
-      <p>在线人数: {onlineCount}</p>
-      {loading ? <p>加载中...</p> : null}
-      {error ? <p style={{ color: 'crimson' }}>{error}</p> : null}
-      {typingUsers.length ? <p>正在输入: {typingUsers.join(', ')}</p> : null}
-      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-        <input value={channelId} onChange={(e) => onChangeChannel(e.target.value)} placeholder="Channel ID" />
-        <input value={seqFrom} onChange={(e) => setSeqFrom(e.target.value)} placeholder="seq_from" />
-        <input value={seqTo} onChange={(e) => setSeqTo(e.target.value)} placeholder="seq_to" />
-        <input value={limit} onChange={(e) => setLimit(e.target.value)} placeholder="limit" />
-        <button onClick={pullMessages}>拉取</button>
+    <section className="panel">
+      <h2>Chat</h2>
+      <p className="muted">Guild: {guildId || '-'}</p>
+      <p className="muted">Socket: {socketState}</p>
+      <p className="muted">Online users: {onlineCount}</p>
+      {loading ? <p className="muted">Loading...</p> : null}
+      {error ? <p className="error-text">{error}</p> : null}
+      {typingUsers.length ? <p className="muted">Typing: {typingUsers.join(', ')}</p> : null}
+      <div className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={channelId} onChange={(e) => onChangeChannel(e.target.value)} placeholder="Channel ID" />
+        <input className="input" value={seqFrom} onChange={(e) => setSeqFrom(e.target.value)} placeholder="seq_from" />
+        <input className="input" value={seqTo} onChange={(e) => setSeqTo(e.target.value)} placeholder="seq_to" />
+        <input className="input" value={limit} onChange={(e) => setLimit(e.target.value)} placeholder="limit" />
+        <button className="btn btn-secondary" onClick={pullMessages}>Fetch</button>
       </div>
-      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-        <input value={content} onChange={(e) => onTypingChange(e.target.value)} placeholder="输入消息" />
-        <button onClick={sendMessage}>发送</button>
+      <div className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={content} onChange={(e) => onTypingChange(e.target.value)} placeholder="Type a message" />
+        <button className="btn" onClick={sendMessage}>Send</button>
       </div>
-      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
-        <input value={editingMessageId} onChange={(e) => setEditingMessageId(e.target.value)} placeholder="messageId" />
-        <input value={editingContent} onChange={(e) => setEditingContent(e.target.value)} placeholder="新内容" />
-        <button onClick={editMessage}>编辑</button>
+      <div className="row-wrap" style={{ marginBottom: 10 }}>
+        <input className="input" value={editingMessageId} onChange={(e) => setEditingMessageId(e.target.value)} placeholder="messageId" />
+        <input className="input" value={editingContent} onChange={(e) => setEditingContent(e.target.value)} placeholder="Updated content" />
+        <button className="btn btn-secondary" onClick={editMessage}>Edit</button>
       </div>
-      <ul>
+      <ul className="list-reset">
         {messages.map((m) => (
-          <li key={m.messageId}>
-            #{m.seq} {m.content} ({m.messageId}){' '}
-            <button type="button" onClick={() => deleteMessage(m.messageId)}>
-              删除
+          <li key={m.messageId} className="card" style={{ marginTop: 8 }}>
+            <div>
+              <strong>#{m.seq}</strong> {m.content}
+            </div>
+            <div className="muted">{m.messageId}</div>
+            <button className="btn btn-danger" type="button" onClick={() => deleteMessage(m.messageId)}>
+              Delete
             </button>
           </li>
         ))}
       </ul>
-      {!loading && !messages.length ? <p>暂无消息</p> : null}
+      {!loading && !messages.length ? <p className="muted">No messages yet</p> : null}
       {pageInfo ? (
         <p>
           next_expected_seq: {pageInfo.nextExpectedSeq ?? '-'} | highest_committed_seq: {pageInfo.highestCommittedSeq ?? '-'} |

src/pages/LoginPage.tsx

@@ -19,35 +19,38 @@ export default function LoginPage() {
       await login(centerApiBase.trim(), centerApiKey.trim(), email, password)
       navigate('/workspace')
     } catch {
-      setError('登录失败，请检查账号密码')
+      setError('Login failed. Please check your email and password.')
     }
   }
 
   return (
-    <section>
-      <h2>登录</h2>
-      {isAuthed ? <p>当前用户：{session?.user.email}</p> : null}
-      <form onSubmit={onSubmit} style={{ display: 'grid', gap: 8, maxWidth: 420 }}>
+    <section className="panel">
+      <h2>Login</h2>
+      {isAuthed ? <p className="muted">Current user: {session?.user.email}</p> : null}
+      <form onSubmit={onSubmit} className="form-grid" style={{ maxWidth: 460 }}>
         <input
+          className="input"
           value={centerApiBase}
           onChange={(e) => setCenterApiBase(e.target.value)}
           placeholder="Center API Base (e.g. http://localhost:7001/api)"
         />
         <input
+          className="input"
           value={centerApiKey}
           onChange={(e) => setCenterApiKey(e.target.value)}
           placeholder="Center API Key"
         />
-        <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email" />
+        <input className="input" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" type="email" />
         <input
+          className="input"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           placeholder="Password"
           type="password"
         />
-        <button type="submit">登录</button>
+        <button className="btn" type="submit">Sign in</button>
       </form>
-      <p>{error}</p>
+      {error ? <p className="error-text">{error}</p> : null}
     </section>
   )
 }

src/pages/WorkspacePage.tsx

@@ -22,7 +22,7 @@ export default function WorkspacePage() {
       const res = await axios.get(`${session.centerApiBase}/healthz`)
       setHealth(JSON.stringify(res.data))
     } catch {
-      setHealth('center healthz 访问失败')
+      setHealth('Failed to access center healthz')
     }
   }
 
@@ -45,26 +45,29 @@ export default function WorkspacePage() {
   }
 
   return (
-    <section>
-      <h2>工作台</h2>
-      <p>Center: {session?.centerApiBase || '-'}</p>
-      <div style={{ marginBottom: 8 }}>
-        <button type="button" onClick={checkCenterHealth}>
-          测试 Center healthz
+    <section className="panel">
+      <h2>Workspace</h2>
+      <p className="muted">Center: {session?.centerApiBase || '-'}</p>
+      <div style={{ marginBottom: 12 }}>
+        <button className="btn" type="button" onClick={checkCenterHealth}>
+          Test Center healthz
         </button>
       </div>
-      <p>{health}</p>
+      {health ? <p className="muted">{health}</p> : null}
 
-      <ul>
+      <ul className="list-reset">
         {(session?.guilds ?? []).map((g) => (
-          <li key={g.nodeId} style={{ marginTop: 8 }}>
-            <strong>{g.name}</strong> ({g.nodeId}) - {g.endpoint}{' '}
-            <button type="button" onClick={() => loadChannels(g.nodeId, g.endpoint)}>
-              加载频道
+          <li key={g.nodeId} className="card" style={{ marginTop: 12 }}>
+            <div>
+              <strong>{g.name}</strong> <span className="muted">({g.nodeId})</span>
+            </div>
+            <div className="muted">{g.endpoint}</div>
+            <button className="btn btn-secondary" type="button" onClick={() => loadChannels(g.nodeId, g.endpoint)}>
+              Load channels
             </button>
-            <ul>
+            <ul className="list-reset" style={{ marginTop: 10 }}>
               {(channelsByGuild[g.nodeId] ?? []).map((c) => (
-                <li key={c.id}>
+                <li key={c.id} style={{ marginTop: 6 }}>
                   <Link
                     to={`/chat?guildId=${encodeURIComponent(g.nodeId)}&channelId=${encodeURIComponent(c.id)}`}
                   >