@wayofmono/wo-web-ui 1.0.0

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@wayofmono/wo-web-ui",
+  "version": "1.0.0",
+  "description": "Web UI components for WayOfMono — chat interface, session management, and tool call visualization",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "dependencies": {
+    "react": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/components/chat-container.tsx

@@ -0,0 +1,137 @@
+import { useRef, useEffect } from "react";
+import type { ChatMessage, SessionInfo } from "../types.js";
+import { getTheme, type ThemeConfig } from "../theme.js";
+import { MessageBubble } from "./message-bubble.js";
+import { ChatInput } from "./chat-input.js";
+import { SessionList } from "./session-list.js";
+import { ToolCallCard } from "./tool-call-card.js";
+
+export interface ChatContainerProps {
+	messages: ChatMessage[];
+	sessions?: SessionInfo[];
+	activeSessionId?: string;
+	onSend: (text: string) => void;
+	onSelectSession?: (id: string) => void;
+	onCreateSession?: () => void;
+	themeMode?: "dark" | "light";
+	disabled?: boolean;
+}
+
+const containerStyle = (theme: ThemeConfig): React.CSSProperties => ({
+	display: "flex",
+	height: "100%",
+	backgroundColor: theme.background,
+	color: theme.text,
+	fontFamily:
+		'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+});
+
+const mainStyle: React.CSSProperties = {
+	flex: 1,
+	display: "flex",
+	flexDirection: "column",
+	overflow: "hidden",
+};
+
+const messagesStyle: React.CSSProperties = {
+	flex: 1,
+	overflowY: "auto",
+	padding: "16px",
+	display: "flex",
+	flexDirection: "column",
+	gap: "12px",
+};
+
+const emptyStyle: React.CSSProperties = {
+	flex: 1,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: "var(--text-secondary, #94a3b8)",
+	fontSize: "14px",
+};
+
+export function ChatContainer({
+	messages,
+	sessions,
+	activeSessionId,
+	onSend,
+	onSelectSession,
+	onCreateSession,
+	themeMode = "dark",
+	disabled,
+}: ChatContainerProps) {
+	const bottomRef = useRef<HTMLDivElement>(null);
+	const theme = getTheme(themeMode);
+
+	useEffect(() => {
+		bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+	}, [messages]);
+
+	const bubbleTheme = {
+		userBubble: theme.userBubble,
+		assistantBubble: theme.assistantBubble,
+		text: theme.text,
+	};
+
+	const inputTheme = {
+		surface: theme.surface,
+		text: theme.text,
+		border: theme.border,
+		primary: theme.primary,
+	};
+
+	const toolCardTheme = {
+		surface: theme.surface,
+		text: theme.text,
+		textSecondary: theme.textSecondary,
+		border: theme.border,
+		success: theme.success,
+		error: theme.error,
+	};
+
+	return (
+		<div style={containerStyle(theme)}>
+			{sessions && onSelectSession && onCreateSession && (
+				<SessionList
+					sessions={sessions}
+					activeId={activeSessionId}
+					onSelect={onSelectSession}
+					onCreate={onCreateSession}
+					theme={{
+						surface: theme.surface,
+						text: theme.text,
+						textSecondary: theme.textSecondary,
+						border: theme.border,
+						primary: theme.primary,
+					}}
+				/>
+			)}
+			<div style={mainStyle}>
+				<div style={messagesStyle}>
+					{messages.length === 0 && (
+						<div style={emptyStyle}>Start a conversation</div>
+					)}
+					{messages.map((msg) => (
+						<div key={msg.id}>
+							<MessageBubble message={msg} theme={bubbleTheme} />
+							{msg.toolCalls?.map((tc) => (
+								<div key={tc.id} style={{ marginTop: "8px" }}>
+									<ToolCallCard toolCall={tc} theme={toolCardTheme} />
+								</div>
+							))}
+						</div>
+					))}
+					<div ref={bottomRef} />
+				</div>
+				<ChatInput
+					onSend={onSend}
+					disabled={disabled}
+					theme={inputTheme}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default ChatContainer;

package/src/components/chat-input.tsx

@@ -0,0 +1,91 @@
+import { useState, type KeyboardEvent } from "react";
+
+export interface ChatInputProps {
+	onSend: (text: string) => void;
+	disabled?: boolean;
+	placeholder?: string;
+	theme: {
+		surface: string;
+		text: string;
+		border: string;
+		primary: string;
+	};
+}
+
+const containerStyle: React.CSSProperties = {
+	display: "flex",
+	gap: "8px",
+	padding: "12px",
+	borderTop: "1px solid var(--border, #e2e8f0)",
+};
+
+const textareaStyle = (
+	theme: ChatInputProps["theme"],
+): React.CSSProperties => ({
+	flex: 1,
+	backgroundColor: theme.surface,
+	color: theme.text,
+	border: `1px solid ${theme.border}`,
+	borderRadius: "8px",
+	padding: "10px 14px",
+	fontSize: "14px",
+	fontFamily: "inherit",
+	resize: "none",
+	outline: "none",
+	minHeight: "42px",
+	maxHeight: "200px",
+	lineHeight: "1.4",
+});
+
+const buttonStyle = (theme: ChatInputProps["theme"]): React.CSSProperties => ({
+	backgroundColor: theme.primary,
+	color: "#fff",
+	border: "none",
+	borderRadius: "8px",
+	padding: "8px 16px",
+	fontSize: "14px",
+	cursor: "pointer",
+	alignSelf: "flex-end",
+});
+
+export function ChatInput({ onSend, disabled, placeholder, theme }: ChatInputProps) {
+	const [text, setText] = useState("");
+
+	const handleSend = () => {
+		const trimmed = text.trim();
+		if (!trimmed || disabled) return;
+		onSend(trimmed);
+		setText("");
+	};
+
+	const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSend();
+		}
+	};
+
+	return (
+		<div style={containerStyle}>
+			<textarea
+				value={text}
+				onChange={(e) => setText(e.target.value)}
+				onKeyDown={handleKeyDown}
+				style={textareaStyle(theme)}
+				placeholder={placeholder ?? "Type a message..."}
+				disabled={disabled}
+				rows={1}
+			/>
+			<button
+				type="button"
+				onClick={handleSend}
+				disabled={disabled || !text.trim()}
+				style={buttonStyle(theme)}
+			>
+				Send
+			</button>
+		</div>
+	);
+}
+
+export default ChatInput;

package/src/components/message-bubble.tsx

@@ -0,0 +1,44 @@
+import type { ChatMessage } from "../types.js";
+
+export interface MessageBubbleProps {
+	message: ChatMessage;
+	theme: {
+		userBubble: string;
+		assistantBubble: string;
+		text: string;
+	};
+}
+
+const bubbleStyle = (role: ChatMessage["role"], theme: MessageBubbleProps["theme"]): React.CSSProperties => ({
+	alignSelf: role === "user" ? "flex-end" : "flex-start",
+	backgroundColor: role === "user" ? theme.userBubble : theme.assistantBubble,
+	color: theme.text,
+	borderRadius: "12px",
+	padding: "8px 14px",
+	maxWidth: "80%",
+	wordBreak: "break-word",
+	whiteSpace: "pre-wrap",
+	fontSize: "14px",
+	lineHeight: "1.5",
+});
+
+const streamingStyle: React.CSSProperties = {
+	display: "inline-block",
+	width: "8px",
+	height: "16px",
+	backgroundColor: "currentColor",
+	animation: "wo-blink 1s step-end infinite",
+	marginLeft: "2px",
+	opacity: 0.7,
+};
+
+export function MessageBubble({ message, theme }: MessageBubbleProps) {
+	return (
+		<div key={message.id} style={bubbleStyle(message.role, theme)}>
+			{message.content}
+			{message.streaming && <span style={streamingStyle} />}
+		</div>
+	);
+}
+
+export default MessageBubble;

package/src/components/session-list.tsx

@@ -0,0 +1,112 @@
+import type { SessionInfo } from "../types.js";
+
+export interface SessionListProps {
+	sessions: SessionInfo[];
+	activeId?: string;
+	onSelect: (id: string) => void;
+	onCreate: () => void;
+	theme: {
+		surface: string;
+		text: string;
+		textSecondary: string;
+		border: string;
+		primary: string;
+	};
+}
+
+const sidebarStyle = (theme: SessionListProps["theme"]): React.CSSProperties => ({
+	width: "260px",
+	backgroundColor: theme.surface,
+	borderRight: `1px solid ${theme.border}`,
+	display: "flex",
+	flexDirection: "column",
+	height: "100%",
+});
+
+const headerStyle: React.CSSProperties = {
+	padding: "16px",
+	fontSize: "16px",
+	fontWeight: 600,
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+};
+
+const createButtonStyle = (theme: SessionListProps["theme"]): React.CSSProperties => ({
+	backgroundColor: theme.primary,
+	color: "#fff",
+	border: "none",
+	borderRadius: "6px",
+	padding: "4px 10px",
+	fontSize: "12px",
+	cursor: "pointer",
+});
+
+const listStyle: React.CSSProperties = {
+	flex: 1,
+	overflowY: "auto",
+	padding: "4px 8px",
+};
+
+function itemStyle(isActive: boolean, theme: SessionListProps["theme"]): React.CSSProperties {
+	return {
+		padding: "10px 12px",
+		borderRadius: "6px",
+		cursor: "pointer",
+		backgroundColor: isActive ? theme.primary + "20" : "transparent",
+		marginBottom: "2px",
+	};
+}
+
+const labelStyle: React.CSSProperties = {
+	fontSize: "14px",
+	fontWeight: 500,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+};
+
+const metaStyle = (theme: SessionListProps["theme"]): React.CSSProperties => ({
+	fontSize: "11px",
+	color: theme.textSecondary,
+	marginTop: "2px",
+});
+
+function formatTime(ts: number): string {
+	const d = new Date(ts);
+	const now = new Date();
+	const diff = now.getTime() - d.getTime();
+	if (diff < 60000) return "just now";
+	if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+	if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+	return d.toLocaleDateString();
+}
+
+export function SessionList({ sessions, activeId, onSelect, onCreate, theme }: SessionListProps) {
+	return (
+		<div style={sidebarStyle(theme)}>
+			<div style={headerStyle}>
+				<span>Sessions</span>
+				<button type="button" style={createButtonStyle(theme)} onClick={onCreate}>
+					+ New
+				</button>
+			</div>
+			<div style={listStyle}>
+				{sessions.map((s) => (
+					<div
+						key={s.id}
+						style={itemStyle(s.id === activeId, theme)}
+						onClick={() => onSelect(s.id)}
+					>
+						<div style={labelStyle}>{s.label}</div>
+						<div style={metaStyle(theme)}>
+							{formatTime(s.updatedAt)} · {s.messageCount} msgs
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+export default SessionList;

package/src/components/tool-call-card.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import type { ToolCall } from "../types.js";
+
+export interface ToolCallCardProps {
+	toolCall: ToolCall;
+	theme: {
+		surface: string;
+		text: string;
+		textSecondary: string;
+		border: string;
+		success: string;
+		error: string;
+	};
+}
+
+const cardStyle = (theme: ToolCallCardProps["theme"]): React.CSSProperties => ({
+	backgroundColor: theme.surface,
+	border: `1px solid ${theme.border}`,
+	borderRadius: "8px",
+	overflow: "hidden",
+	fontSize: "13px",
+});
+
+const headerStyle: React.CSSProperties = {
+	display: "flex",
+	alignItems: "center",
+	gap: "8px",
+	padding: "8px 12px",
+	cursor: "pointer",
+	userSelect: "none",
+};
+
+const dotStyle = (color: string): React.CSSProperties => ({
+	width: "8px",
+	height: "8px",
+	borderRadius: "50%",
+	backgroundColor: color,
+	flexShrink: 0,
+});
+
+const nameStyle: React.CSSProperties = {
+	fontWeight: 600,
+	flex: 1,
+};
+
+const contentStyle = (theme: ToolCallCardProps["theme"]): React.CSSProperties => ({
+	padding: "8px 12px",
+	borderTop: `1px solid ${theme.border}`,
+	fontFamily: "monospace",
+	fontSize: "12px",
+	whiteSpace: "pre-wrap",
+	wordBreak: "break-word",
+	maxHeight: "200px",
+	overflowY: "auto",
+});
+
+export function ToolCallCard({ toolCall, theme }: ToolCallCardProps) {
+	const [expanded, setExpanded] = useState(false);
+	const statusColor = toolCall.result?.isError ? theme.error : theme.success;
+
+	return (
+		<div style={cardStyle(theme)}>
+			<div style={headerStyle} onClick={() => setExpanded(!expanded)}>
+				<span style={dotStyle(statusColor)} />
+				<span style={nameStyle}>{toolCall.name}</span>
+				<span style={{ color: theme.textSecondary, fontSize: "11px" }}>
+					{expanded ? "▲" : "▼"}
+				</span>
+			</div>
+			{expanded && (
+				<div style={contentStyle(theme)}>
+					<div style={{ color: theme.textSecondary, marginBottom: "4px" }}>Arguments:</div>
+					{toolCall.args}
+					{toolCall.result && (
+						<>
+							<div
+								style={{
+									color: theme.textSecondary,
+									marginTop: "8px",
+									marginBottom: "4px",
+								}}
+							>
+								Result:
+							</div>
+							{toolCall.result.content}
+						</>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default ToolCallCard;

package/src/index.ts

@@ -0,0 +1,10 @@
+export { ChatContainer } from "./components/chat-container.js";
+export { MessageBubble } from "./components/message-bubble.js";
+export { ChatInput } from "./components/chat-input.js";
+export { SessionList } from "./components/session-list.js";
+export { ToolCallCard } from "./components/tool-call-card.js";
+
+export type { ChatMessage, ToolCall, ToolResult } from "./types.js";
+export type { SessionInfo, DiagnosticInfo } from "./types.js";
+export type { ThemeConfig, WebSocketMessage } from "./types.js";
+export { darkTheme, lightTheme, getTheme } from "./theme.js";

package/src/theme.ts

@@ -0,0 +1,35 @@
+import type { ThemeConfig } from "./types.js";
+
+export const darkTheme: ThemeConfig = {
+	mode: "dark",
+	primary: "#6366f1",
+	background: "#0f172a",
+	surface: "#1e293b",
+	text: "#f1f5f9",
+	textSecondary: "#94a3b8",
+	border: "#334155",
+	userBubble: "#6366f1",
+	assistantBubble: "#334155",
+	error: "#ef4444",
+	success: "#22c55e",
+};
+
+export const lightTheme: ThemeConfig = {
+	mode: "light",
+	primary: "#6366f1",
+	background: "#ffffff",
+	surface: "#f8fafc",
+	text: "#0f172a",
+	textSecondary: "#64748b",
+	border: "#e2e8f0",
+	userBubble: "#6366f1",
+	assistantBubble: "#f1f5f9",
+	error: "#ef4444",
+	success: "#22c55e",
+};
+
+export function getTheme(mode: "dark" | "light"): ThemeConfig {
+	return mode === "dark" ? darkTheme : lightTheme;
+}
+
+export type { ThemeConfig };

package/src/types.ts

@@ -0,0 +1,56 @@
+export interface ChatMessage {
+	id: string;
+	role: "user" | "assistant" | "system" | "tool";
+	content: string;
+	timestamp: number;
+	toolCalls?: ToolCall[];
+	toolResult?: ToolResult;
+	streaming?: boolean;
+}
+
+export interface ToolCall {
+	id: string;
+	name: string;
+	args: string;
+	result?: ToolResult;
+}
+
+export interface ToolResult {
+	content: string;
+	isError?: boolean;
+}
+
+export interface SessionInfo {
+	id: string;
+	label: string;
+	createdAt: number;
+	updatedAt: number;
+	messageCount: number;
+}
+
+export interface DiagnosticInfo {
+	message: string;
+	severity: "error" | "warning" | "info" | "hint";
+	line?: number;
+	column?: number;
+	tool?: string;
+}
+
+export interface ThemeConfig {
+	mode: "dark" | "light";
+	primary: string;
+	background: string;
+	surface: string;
+	text: string;
+	textSecondary: string;
+	border: string;
+	userBubble: string;
+	assistantBubble: string;
+	error: string;
+	success: string;
+}
+
+export interface WebSocketMessage {
+	type: "message" | "tool_call" | "tool_result" | "error" | "status" | "diagnostic";
+	payload: unknown;
+}