diff --git a/frontend/src/features/character/components/CharacterSidebarItem.svelte b/frontend/src/features/character/components/CharacterSidebarItem.svelte
index c55cd0c4..2c3e2730 100644
--- a/frontend/src/features/character/components/CharacterSidebarItem.svelte
+++ b/frontend/src/features/character/components/CharacterSidebarItem.svelte
@@ -1,5 +1,7 @@
-
+{#snippet CharacterIcon()}
+ {#if avatarUrl}
+
+ {:else}
+
{initials}
+ {/if}
+{/snippet}
+
+
diff --git a/frontend/src/features/character/components/settingsSubpage/CharacterAssetsSettings.svelte b/frontend/src/features/character/components/settingsSubpage/CharacterAssetsSettings.svelte
new file mode 100644
index 00000000..1ede81a7
--- /dev/null
+++ b/frontend/src/features/character/components/settingsSubpage/CharacterAssetsSettings.svelte
@@ -0,0 +1,313 @@
+
+
+
+
Assets
+
+
+
+
+
+ {#if duplicateNameError}
+
+ {duplicateNameError}
+
+ {/if}
+
+
+ {#if imageAssets.length > 0}
+
+
Images
+
+ {#each imageAssets as asset, _ (asset.id)}
+ {@const globalIndex = character.assets.assets.indexOf(asset)}
+ {@const previewUrl = assetPreviews.get(asset.id)}
+
handleDragStart(globalIndex)}
+ ondragover={(e) => handleDragOver(e, globalIndex)}
+ ondragend={handleDragEnd}
+ role="button"
+ tabindex="0"
+ >
+
+
+
+
+ updateAssetName(globalIndex, e.currentTarget.value)}
+ placeholder="Asset name"
+ />
+
+
+
+ {#if previewUrl}
+
+ {:else}
+
+ Loading...
+
+ {/if}
+
{asset.mimeType}
+
+ {/each}
+
+
+ {/if}
+
+
+ {#if otherAssets.length > 0}
+
+
(expandOtherAssets = !expandOtherAssets)}
+ onkeydown={(e) => e.key === "Enter" && (expandOtherAssets = !expandOtherAssets)}
+ role="button"
+ tabindex="0"
+ >
+
Other Assets ({otherAssets.length})
+ {#if expandOtherAssets}
+
+ {:else}
+
+ {/if}
+
+
+ {#if expandOtherAssets}
+
+ {#each otherAssets as asset (asset.id)}
+ {@const globalIndex = character.assets.assets.indexOf(asset)}
+
handleDragStart(globalIndex)}
+ ondragover={(e) => handleDragOver(e, globalIndex)}
+ ondragend={handleDragEnd}
+ role="button"
+ tabindex="0"
+ >
+
+
+
+ updateAssetName(globalIndex, e.currentTarget.value)}
+ placeholder="Asset name"
+ />
+
{asset.mimeType}
+
+
+
+ {/each}
+
+ {/if}
+
+ {/if}
+
+
+ {#if character.assets.assets.length === 0}
+
+
No assets yet.
+
Upload images or other files to embed in your character.
+
+ {/if}
+
diff --git a/frontend/src/features/character/components/settingsSubpage/CharacterBasicSettings.svelte b/frontend/src/features/character/components/settingsSubpage/CharacterBasicSettings.svelte
new file mode 100644
index 00000000..e7ea2123
--- /dev/null
+++ b/frontend/src/features/character/components/settingsSubpage/CharacterBasicSettings.svelte
@@ -0,0 +1,220 @@
+
+
+
+
Basic Information
+
+
+
+
+
+
+
diff --git a/frontend/src/features/character/components/settingsSubpage/CharacterHooksSettings.svelte b/frontend/src/features/character/components/settingsSubpage/CharacterHooksSettings.svelte
new file mode 100644
index 00000000..ceb75338
--- /dev/null
+++ b/frontend/src/features/character/components/settingsSubpage/CharacterHooksSettings.svelte
@@ -0,0 +1,333 @@
+
+
+
+
Advanced Settings
+
+
+
+ These are advanced settings. Incorrect configuration may affect character behavior.
+
+
+
+
+
+
+
Replace Hooks
+
+
+ {#each hookTypes as ht (ht.type)}
+
+ {/each}
+
+
+
+ {hookTypes.find((h) => h.type === activeHookType)?.description}
+
+
+
+
+
+
+ {#if getHooks(activeHookType).length === 0}
+
+
No {activeHookType} hooks.
+
+ {:else}
+
+ {#each getHooks(activeHookType) as hook, index (index)}
+
+
toggleExpand(index)}
+ onkeydown={(e) => e.key === "Enter" && toggleExpand(index)}
+ role="button"
+ tabindex="0"
+ >
+
+ {hook.input || "(empty pattern)"} → {hook.output || "(empty)"}
+
+ {hook.meta.type}
+ {#if expandedHookIndex === index}
+
+ {:else}
+
+ {/if}
+
+
+ {#if expandedHookIndex === index}
+
+
+
+
+
+
+
+
+
+
+
+ {#if hook.meta.type === "string"}
+
+ {/if}
+
+
+
+
+
+
+
+ {/if}
+
+ {/each}
+
+ {/if}
+
diff --git a/frontend/src/features/character/components/settingsSubpage/CharacterLorebookSettings.svelte b/frontend/src/features/character/components/settingsSubpage/CharacterLorebookSettings.svelte
new file mode 100644
index 00000000..7213b09c
--- /dev/null
+++ b/frontend/src/features/character/components/settingsSubpage/CharacterLorebookSettings.svelte
@@ -0,0 +1,270 @@
+
+
+
+
Lorebook
+
+
+
+
+
+
+
Entries ({character.prompt.lorebook.data.length})
+
+
+
+ {#if character.prompt.lorebook.data.length === 0}
+
+
No lorebook entries yet.
+
Add entries to inject context based on conditions.
+
+ {:else}
+
+ {#each character.prompt.lorebook.data as entry (entry.id)}
+
+
+
toggleExpand(entry.id)}
+ onkeydown={(e) => e.key === "Enter" && toggleExpand(entry.id)}
+ role="button"
+ tabindex="0"
+ >
+ e.stopPropagation()}
+ onchange={(e) =>
+ updateEntry(entry.id, { enabled: e.currentTarget.checked })}
+ />
+ {entry.name || "Untitled"}
+
+ {getConditionLabel(entry.condition[0]?.type || "always")}
+
+ P: {entry.priority}
+ {#if expandedEntryId === entry.id}
+
+ {:else}
+
+ {/if}
+
+
+
+ {#if expandedEntryId === entry.id}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/if}
+
+ {/each}
+
+ {/if}
+
diff --git a/frontend/src/features/character/components/settingsSubpage/CharacterMetadataSettings.svelte b/frontend/src/features/character/components/settingsSubpage/CharacterMetadataSettings.svelte
new file mode 100644
index 00000000..6f7bfbd1
--- /dev/null
+++ b/frontend/src/features/character/components/settingsSubpage/CharacterMetadataSettings.svelte
@@ -0,0 +1,123 @@
+
+
+
+
Metadata
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/features/character/components/settingsSubpage/CharacterPromptSettings.svelte b/frontend/src/features/character/components/settingsSubpage/CharacterPromptSettings.svelte
new file mode 100644
index 00000000..27ba0104
--- /dev/null
+++ b/frontend/src/features/character/components/settingsSubpage/CharacterPromptSettings.svelte
@@ -0,0 +1,103 @@
+
+
+
+
Prompt Configuration
+
+
+
+
+
diff --git a/frontend/src/features/character/stores/characterStore.svelte.ts b/frontend/src/features/character/stores/characterStore.svelte.ts
index a59011d8..15af8762 100644
--- a/frontend/src/features/character/stores/characterStore.svelte.ts
+++ b/frontend/src/features/character/stores/characterStore.svelte.ts
@@ -68,7 +68,7 @@ export class CharacterStore {
});
});
} catch (e) {
- console.error("Failed to load characters", e);
+ Logger.error("Failed to load characters", e);
this.characters = [];
}
}
@@ -140,7 +140,7 @@ export class CharacterStore {
return { success: false, error: "Failed to parse character" };
}
} catch (e) {
- console.error(e);
+ Logger.error(e);
Logger.structured("character.import", {
format,
success: false,
diff --git a/frontend/src/features/character/utils/assetEncoding.ts b/frontend/src/features/character/utils/assetEncoding.ts
index 085ef69e..59c4fdd6 100644
--- a/frontend/src/features/character/utils/assetEncoding.ts
+++ b/frontend/src/features/character/utils/assetEncoding.ts
@@ -1,5 +1,6 @@
import type { AssetEntity } from "@arisutalk/character-spec/v0/Character/Assets";
import type { IAssetStorageAdapter } from "@/lib/interfaces";
+import { Logger } from "@common/logger/Logger";
/**
* Converts a Blob to a Uint8Array.
@@ -40,7 +41,7 @@ export async function remapAssetToUint8Array(
const uint8Array = await blobToUint8Array(blob);
return { ...asset, data: uint8Array };
} catch (e) {
- console.error("Failed to fetch local file for export:", asset.data, e);
+ Logger.error("Failed to fetch local file for export:", asset.data, e);
throw e instanceof Error ? e : new Error(String(e));
}
}
@@ -50,7 +51,7 @@ export async function remapAssetToUint8Array(
try {
const commaIndex = asset.data.indexOf(",");
if (commaIndex === -1) {
- console.warn(
+ Logger.warn(
"Malformed data URL (no comma), leaving as is:",
asset.data.slice(0, 50)
);
@@ -61,7 +62,7 @@ export async function remapAssetToUint8Array(
const bytes = Uint8Array.from(binaryString, (c) => c.charCodeAt(0));
return { ...asset, data: bytes };
} catch (e) {
- console.error("Failed to decode base64 data URL:", e);
+ Logger.error("Failed to decode base64 data URL:", e);
return asset; // Leave as is on error
}
}
@@ -77,8 +78,9 @@ export async function remapAssetToUint8Array(
* @param assets - Array of assets to collect buffers from
* @returns Array of ArrayBuffers from Uint8Array assets
*/
-export function collectTransferableBuffers(assets: AssetEntity[]): ArrayBufferLike[] {
+export function collectTransferableBuffers(assets: AssetEntity[]): ArrayBuffer[] {
return assets
- .filter((a): a is AssetEntity & { data: Uint8Array } => a.data instanceof Uint8Array)
- .map((a) => a.data.buffer);
+ .map((a) => a.data)
+ .filter((a) => a instanceof Uint8Array)
+ .map((a) => a.buffer);
}
diff --git a/frontend/src/features/chat/components/ChatList.svelte b/frontend/src/features/chat/components/ChatList.svelte
index 4a5ef7f2..d0d5d207 100644
--- a/frontend/src/features/chat/components/ChatList.svelte
+++ b/frontend/src/features/chat/components/ChatList.svelte
@@ -1,6 +1,8 @@
+
+
+
+
+ {author}
+ {timestamp}
+
+
+
+ {content}
+
+
+ {#if tags.length > 0}
+
+ {#each tags as tag (tag)}
+ #{tag}
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+
diff --git a/frontend/src/features/sns/SNSProfile.svelte b/frontend/src/features/sns/SNSProfile.svelte
new file mode 100644
index 00000000..d1e387a0
--- /dev/null
+++ b/frontend/src/features/sns/SNSProfile.svelte
@@ -0,0 +1,168 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if activeTab === "posts"}
+ {#each posts as post (post.id)}
+
+ {/each}
+ {:else if activeTab === "secrets"}
+
+
+
Secret posts are private
+
+ {#each profile.frequentTags as tag (tag)}
+
+ {/each}
+
+ {/if}
+
+
diff --git a/frontend/src/global.css b/frontend/src/global.css
index b664203e..6d40fa9f 100644
--- a/frontend/src/global.css
+++ b/frontend/src/global.css
@@ -1,33 +1,50 @@
@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
+/* Dark mode annotation */
+:root {
+ color-scheme: light dark;
+}
+
/* DaisyUI theme */
-@plugin "daisyui";
+@plugin "daisyui" {
+ themes: false;
+}
@plugin "daisyui/theme" {
name: "night";
default: true;
- prefersdark: false;
+ prefersdark: true;
color-scheme: "dark";
- --color-base-100: oklch(20.768% 0.039 265.754);
- --color-base-200: oklch(19.314% 0.037 265.754);
- --color-base-300: oklch(17.86% 0.034 265.754);
- --color-base-content: oklch(84.153% 0.007 265.754);
- --color-primary: oklch(75.351% 0.138 232.661);
- --color-primary-content: oklch(15.07% 0.027 232.661);
- --color-secondary: oklch(68.011% 0.158 276.934);
- --color-secondary-content: oklch(13.602% 0.031 276.934);
- --color-accent: oklch(72.36% 0.176 350.048);
- --color-accent-content: oklch(14.472% 0.035 350.048);
- --color-neutral: oklch(27.949% 0.036 260.03);
- --color-neutral-content: oklch(85.589% 0.007 260.03);
- --color-info: oklch(68.455% 0.148 237.251);
- --color-info-content: oklch(0% 0 0);
- --color-success: oklch(78.452% 0.132 181.911);
- --color-success-content: oklch(15.69% 0.026 181.911);
- --color-warning: oklch(83.242% 0.139 82.95);
- --color-warning-content: oklch(16.648% 0.027 82.95);
- --color-error: oklch(71.785% 0.17 13.118);
- --color-error-content: oklch(14.357% 0.034 13.118);
+ /* Optimized backgrounds for good contrast without being too dark */
+ --color-base-100: oklch(19% 0.05 265.754);
+ --color-base-200: oklch(17% 0.048 265.754);
+ --color-base-300: oklch(15% 0.045 265.754);
+ /* Much brighter content for strong contrast (WCAG AAA) */
+ --color-base-content: oklch(96% 0.01 265.754);
+ /* Vibrant, high-saturation primary color */
+ --color-primary: oklch(72% 0.22 235);
+ --color-primary-content: oklch(98% 0.012 235);
+ /* Vibrant, high-saturation secondary color */
+ --color-secondary: oklch(70% 0.24 280);
+ --color-secondary-content: oklch(98% 0.014 280);
+ /* Vibrant, high-saturation accent color */
+ --color-accent: oklch(75% 0.26 350);
+ --color-accent-content: oklch(98% 0.015 350);
+ /* Darker neutral with high-contrast content */
+ --color-neutral: oklch(24% 0.045 260.03);
+ --color-neutral-content: oklch(96% 0.01 260.03);
+ /* High-contrast info color */
+ --color-info: oklch(72% 0.2 240);
+ --color-info-content: oklch(98% 0 0);
+ /* Vivid success color */
+ --color-success: oklch(76% 0.18 160);
+ --color-success-content: oklch(98% 0.012 160);
+ /* Vibrant warning color */
+ --color-warning: oklch(85% 0.19 85);
+ --color-warning-content: oklch(15% 0.04 85);
+ /* Strong error color */
+ --color-error: oklch(68% 0.23 15);
+ --color-error-content: oklch(98% 0.015 15);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
@@ -45,8 +62,11 @@
background-color: var(--color-base-100);
color: var(--color-base-content);
-webkit-font-smoothing: antialiased;
+ /* Default font size, overridden by --app-font-size */
+ font-size: var(--app-font-size, 16px);
+ /* Default font family, overridden by --app-font-family */
font-family:
- "Noto Sans KR",
+ var(--app-font-family, "Noto Sans KR"),
system-ui,
-apple-system,
BlinkMacSystemFont,
@@ -54,6 +74,10 @@
Roboto,
sans-serif;
font-weight: 400;
+ /* Smooth font transition */
+ transition:
+ font-size 0.2s ease,
+ font-family 0.2s ease;
}
#app {
height: 100%;
@@ -61,3 +85,113 @@
overflow: hidden;
}
}
+
+/* Custom utilities - white mode ready via CSS variables */
+@layer utilities {
+ /* Glassmorphism effects */
+ .glass {
+ backdrop-filter: blur(10px);
+ background: oklch(from var(--color-base-200) l c h / 0.7);
+ border: 1px solid oklch(from var(--color-base-content) l c h / 0.1);
+ }
+
+ .glass-card {
+ backdrop-filter: blur(12px);
+ background: oklch(from var(--color-base-200) l c h / 0.8);
+ border: 1px solid oklch(from var(--color-base-content) l c h / 0.08);
+ border-radius: var(--radius-box);
+ }
+
+ .glass-subtle {
+ backdrop-filter: blur(6px);
+ background: oklch(from var(--color-base-100) l c h / 0.5);
+ }
+
+ /* Gradient accents */
+ .gradient-accent {
+ background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%);
+ }
+
+ .gradient-primary {
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-info) 100%);
+ }
+
+ /* Text gradients */
+ .text-gradient-accent {
+ background: linear-gradient(
+ 135deg,
+ var(--color-accent),
+ var(--color-secondary),
+ var(--color-accent),
+ var(--color-accent) /* more weight */
+ );
+
+ background-size: 300% 300%;
+ animation: curious-gaze-wild 20s ease-in-out infinite;
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+ }
+
+ @keyframes curious-gaze-wild {
+ 0%,
+ 75% {
+ background-position: 0% 0%;
+ }
+ 78.75% {
+ background-position: 0% 0%;
+ }
+ 83.75%,
+ 87.5% {
+ background-position: 100% 100%;
+ }
+ 91.25%,
+ 95% {
+ background-position: 20% 80%;
+ }
+ 100% {
+ background-position: 0% 0%;
+ }
+ }
+
+ /* Hover transitions */
+ .hover-lift {
+ transition:
+ transform 0.2s ease,
+ box-shadow 0.2s ease;
+ }
+ .hover-lift:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 24px oklch(from var(--color-base-100) l c h / 0.4);
+ }
+
+ /* SNS-specific utilities */
+ .sns-card {
+ backdrop-filter: blur(10px);
+ background: oklch(from var(--color-neutral) l c h / 0.6);
+ border: 1px solid oklch(from var(--color-base-content) l c h / 0.1);
+ border-radius: var(--radius-box);
+ transition: background 0.2s ease;
+ }
+ .sns-card:hover {
+ background: oklch(from var(--color-neutral) l c h / 0.8);
+ }
+
+ /* Badge pill style */
+ .badge-pill {
+ border-radius: 9999px;
+ padding: 0.25rem 0.75rem;
+ font-size: 0.75rem;
+ font-weight: 500;
+ }
+}
+
+/* Native drag-and-drop styles */
+[draggable="true"] {
+ cursor: grab;
+ user-select: none;
+}
+
+[draggable="true"]:active {
+ cursor: grabbing;
+}
diff --git a/frontend/src/lib/adapters/storage/character/IDBCharacterAdapter.ts b/frontend/src/lib/adapters/storage/character/IDBCharacterAdapter.ts
index b4a1b961..f8e42646 100644
--- a/frontend/src/lib/adapters/storage/character/IDBCharacterAdapter.ts
+++ b/frontend/src/lib/adapters/storage/character/IDBCharacterAdapter.ts
@@ -1,6 +1,7 @@
import type { Character } from "@arisutalk/character-spec/v0/Character";
import { getArisuDB } from "../IndexedDBHelper";
import type { ICharacterStorageAdapter, CharacterMetadata } from "@/lib/interfaces";
+import { cloneDeep } from "lodash-es";
export class IDBCharacterAdapter implements ICharacterStorageAdapter {
private db = getArisuDB();
@@ -10,7 +11,11 @@ export class IDBCharacterAdapter implements ICharacterStorageAdapter {
}
async saveCharacter(character: Character): Promise
{
- await this.db.characters.put(character);
+ // Remove Svelte proxy wrapper by serializing/deserializing
+ // IndexedDB uses structuredClone internally which can't handle proxies
+ // So use cloneDeep to remove proxy wrapper
+ const plainCharacter = cloneDeep(character);
+ await this.db.characters.put(plainCharacter);
}
async getCharacter(id: string): Promise {
diff --git a/frontend/src/lib/adapters/storage/character/LocalStorageCharacterAdapter.ts b/frontend/src/lib/adapters/storage/character/LocalStorageCharacterAdapter.ts
index a390eadb..bb1929fd 100644
--- a/frontend/src/lib/adapters/storage/character/LocalStorageCharacterAdapter.ts
+++ b/frontend/src/lib/adapters/storage/character/LocalStorageCharacterAdapter.ts
@@ -1,5 +1,6 @@
import type { ICharacterStorageAdapter, CharacterMetadata } from "@/lib/interfaces";
import type { Character } from "@arisutalk/character-spec/v0/Character";
+import { Logger } from "@common/logger/Logger";
/**
* LocalStorage-based character storage adapter.
@@ -20,7 +21,7 @@ export class LocalStorageCharacterAdapter implements ICharacterStorageAdapter {
async init(): Promise {
if (!import.meta.env.DEV) {
- console.warn("LocalStorageCharacterAdapter is for development/testing only.");
+ Logger.warn("LocalStorageCharacterAdapter is for development/testing only.");
}
return Promise.resolve();
}
diff --git a/frontend/src/lib/adapters/storage/chat/IDBChatAdapter.ts b/frontend/src/lib/adapters/storage/chat/IDBChatAdapter.ts
index b4c4d654..eb3897d9 100644
--- a/frontend/src/lib/adapters/storage/chat/IDBChatAdapter.ts
+++ b/frontend/src/lib/adapters/storage/chat/IDBChatAdapter.ts
@@ -1,6 +1,7 @@
import type { Chat, Message } from "@arisutalk/character-spec/v0/Character";
import { getArisuDB } from "../IndexedDBHelper";
import type { IChatStorageAdapter, LocalChat } from "@/lib/interfaces";
+import { cloneDeep } from "lodash-es";
export class IDBChatAdapter implements IChatStorageAdapter {
private db = getArisuDB();
@@ -28,7 +29,9 @@ export class IDBChatAdapter implements IChatStorageAdapter {
}
async saveChat(chat: Chat): Promise {
- await this.db.chats.put(chat);
+ // Remove Svelte proxy wrapper by cloning
+ const plainChat = cloneDeep(chat);
+ await this.db.chats.put(plainChat);
}
private toLocalChat(chat: Chat): LocalChat {
@@ -69,7 +72,9 @@ export class IDBChatAdapter implements IChatStorageAdapter {
createdAt: now,
updatedAt: now,
};
- await this.db.chats.put(chat);
+ // Anti-proxy
+ const plainChat = cloneDeep(chat);
+ await this.db.chats.put(plainChat);
return id;
}
@@ -88,7 +93,9 @@ export class IDBChatAdapter implements IChatStorageAdapter {
chatId,
inlays: message.inlays || [],
};
- await this.db.messages.put(messageWithChatId);
+ // Remove Svelte proxy wrapper
+ const plainMessage = cloneDeep(messageWithChatId);
+ await this.db.messages.put(plainMessage);
// Update chat's updatedAt timestamp
chat.updatedAt = message.timestamp || Date.now();
@@ -96,7 +103,7 @@ export class IDBChatAdapter implements IChatStorageAdapter {
}
async getMessages(chatId: string): Promise {
- return this.db.messages.where("chatId").equals(chatId).toArray();
+ return this.db.messages.where("chatId").equals(chatId).sortBy("timestamp");
}
async updateMessage(
@@ -110,7 +117,9 @@ export class IDBChatAdapter implements IChatStorageAdapter {
}
message.content = content;
message.timestamp = Date.now();
- await this.db.messages.put(message);
+ // Remove Svelte proxy wrapper
+ const plainMessage = cloneDeep(message);
+ await this.db.messages.put(plainMessage);
}
async deleteMessage(chatId: string, messageId: string): Promise {
diff --git a/frontend/src/lib/adapters/storage/persona/IDBPersonaAdapter.ts b/frontend/src/lib/adapters/storage/persona/IDBPersonaAdapter.ts
index 88804619..5cb16725 100644
--- a/frontend/src/lib/adapters/storage/persona/IDBPersonaAdapter.ts
+++ b/frontend/src/lib/adapters/storage/persona/IDBPersonaAdapter.ts
@@ -3,6 +3,7 @@ import type { IPersonaStorageAdapter } from "@/lib/interfaces";
import type { Persona } from "@/features/persona/schema";
import { SettingsSchema } from "@/lib/types/IDataModel";
import { apply } from "@arisutalk/character-spec/utils";
+import { cloneDeep } from "lodash-es";
export class IDBPersonaAdapter implements IPersonaStorageAdapter {
private db = getArisuDB();
@@ -16,11 +17,15 @@ export class IDBPersonaAdapter implements IPersonaStorageAdapter {
}
async savePersona(persona: Persona): Promise {
- await this.db.personas.put(persona);
+ // Remove Svelte proxy wrapper by serializing/deserializing
+ const plainPersona = cloneDeep(persona);
+ await this.db.personas.put(plainPersona);
}
async updatePersona(id: string, persona: Persona): Promise {
- await this.db.personas.put({ ...persona, id });
+ // Remove Svelte proxy wrapper by serializing/deserializing
+ const plainPersona = cloneDeep({ ...persona, id });
+ await this.db.personas.put(plainPersona);
}
async deletePersona(id: string): Promise {
@@ -41,10 +46,14 @@ export class IDBPersonaAdapter implements IPersonaStorageAdapter {
const defaults = apply(SettingsSchema, {
activePersonaId: id,
});
- await this.db.settings.put({
- ...defaults,
- id: "singleton",
- });
+ // Remove Svelte proxy wrapper by serializing/deserializing
+ const plainDefaults = JSON.parse(
+ JSON.stringify({
+ ...defaults,
+ id: "singleton",
+ })
+ ) as typeof defaults & { id: string };
+ await this.db.settings.put(plainDefaults);
}
}
}
diff --git a/frontend/src/lib/adapters/storage/persona/LocalStoragePersonaAdapter.ts b/frontend/src/lib/adapters/storage/persona/LocalStoragePersonaAdapter.ts
index 4df8555a..6803b8e6 100644
--- a/frontend/src/lib/adapters/storage/persona/LocalStoragePersonaAdapter.ts
+++ b/frontend/src/lib/adapters/storage/persona/LocalStoragePersonaAdapter.ts
@@ -1,5 +1,6 @@
import type { IPersonaStorageAdapter } from "@/lib/interfaces";
import { PersonaSchema, type Persona } from "@/features/persona/schema";
+import { Logger } from "@common/logger/Logger";
/**
* LocalStorage-based persona storage adapter.
@@ -15,7 +16,7 @@ export class LocalStoragePersonaAdapter implements IPersonaStorageAdapter {
async init(): Promise {
if (!import.meta.env.DEV) {
- console.warn("LocalStoragePersonaAdapter is for development/testing only.");
+ Logger.warn("LocalStoragePersonaAdapter is for development/testing only.");
}
return Promise.resolve();
}
diff --git a/frontend/src/lib/adapters/storage/settings/IDBSettingsAdapter.ts b/frontend/src/lib/adapters/storage/settings/IDBSettingsAdapter.ts
index 0237f602..3e8753bd 100644
--- a/frontend/src/lib/adapters/storage/settings/IDBSettingsAdapter.ts
+++ b/frontend/src/lib/adapters/storage/settings/IDBSettingsAdapter.ts
@@ -1,7 +1,8 @@
import { getArisuDB } from "../IndexedDBHelper";
import type { ISettingsStorageAdapter } from "@/lib/interfaces";
-import { Settings, SettingsSchema } from "@/lib/types/IDataModel";
+import { type Settings, SettingsSchema } from "@/lib/types/IDataModel";
import { apply } from "@arisutalk/character-spec/utils";
+import { cloneDeep } from "lodash-es";
export class IDBSettingsAdapter implements ISettingsStorageAdapter {
private db = getArisuDB();
@@ -11,7 +12,9 @@ export class IDBSettingsAdapter implements ISettingsStorageAdapter {
}
async saveSettings(settings: Settings): Promise {
- await this.db.settings.put({ ...settings, id: "singleton" });
+ // Remove Svelte proxy wrapper by serializing/deserializing
+ const plainSettings = cloneDeep({ ...settings, id: "singleton" });
+ await this.db.settings.put(plainSettings);
}
async getSettings(): Promise {
diff --git a/frontend/src/lib/adapters/storage/settings/LocalStorageSettingsAdapter.ts b/frontend/src/lib/adapters/storage/settings/LocalStorageSettingsAdapter.ts
index 202d4373..ef8342bb 100644
--- a/frontend/src/lib/adapters/storage/settings/LocalStorageSettingsAdapter.ts
+++ b/frontend/src/lib/adapters/storage/settings/LocalStorageSettingsAdapter.ts
@@ -1,6 +1,7 @@
import type { ISettingsStorageAdapter } from "@/lib/interfaces";
-import { Settings, SettingsSchema } from "@/lib/types/IDataModel";
+import { type Settings, SettingsSchema } from "@/lib/types/IDataModel";
import { apply } from "@arisutalk/character-spec/utils";
+import { Logger } from "@common/logger/Logger";
/**
* LocalStorage-based settings storage adapter.
@@ -11,7 +12,7 @@ export class LocalStorageSettingsAdapter implements ISettingsStorageAdapter {
async init(): Promise {
if (!import.meta.env.DEV) {
- console.warn("LocalStorageSettingsAdapter is for development/testing only.");
+ Logger.warn("LocalStorageSettingsAdapter is for development/testing only.");
}
return Promise.resolve();
}
diff --git a/frontend/src/lib/interfaces/IAssetStorageAdapter.ts b/frontend/src/lib/interfaces/IAssetStorageAdapter.ts
index 2fdcbb6b..d4bed64c 100644
--- a/frontend/src/lib/interfaces/IAssetStorageAdapter.ts
+++ b/frontend/src/lib/interfaces/IAssetStorageAdapter.ts
@@ -74,4 +74,11 @@ export interface IAssetStorageAdapter {
id: FilePointerURL,
ifNotExist?: T
): Promise;
+
+ /**
+ * Delete an asset from storage.
+ * @param id - URL object for the asset data. `local://` prefix is required.
+ * @throws Error if the asset does not exist.
+ */
+ deleteAsset(id: FilePointerURL): Promise;
}
diff --git a/frontend/src/lib/interfaces/ISettingsStorageAdapter.ts b/frontend/src/lib/interfaces/ISettingsStorageAdapter.ts
index 75988275..5128a5ec 100644
--- a/frontend/src/lib/interfaces/ISettingsStorageAdapter.ts
+++ b/frontend/src/lib/interfaces/ISettingsStorageAdapter.ts
@@ -1,4 +1,4 @@
-import { Settings } from "@/lib/types/IDataModel";
+import type { Settings } from "@/lib/types/IDataModel";
/**
* Interface for settings storage adapters.
diff --git a/frontend/src/lib/stores/ui.svelte.ts b/frontend/src/lib/stores/ui.svelte.ts
index 6c281f08..9bdf37d3 100644
--- a/frontend/src/lib/stores/ui.svelte.ts
+++ b/frontend/src/lib/stores/ui.svelte.ts
@@ -2,8 +2,12 @@
* @fileoverview Global UI state using Svelte 5 Runes.
*/
+import type { Character } from "@arisutalk/character-spec/v0/Character";
+
class UIState {
settingsModalOpen = $state(false);
+ characterSettingsOpen = $state(false);
+ characterSettingsTarget = $state(null);
toggleSettingsModal() {
this.settingsModalOpen = !this.settingsModalOpen;
@@ -16,6 +20,23 @@ class UIState {
closeSettingsModal() {
this.settingsModalOpen = false;
}
+
+ /**
+ * Opens the character settings modal for the given character.
+ * @param character - The character to edit
+ */
+ openCharacterSettings(character: Character) {
+ this.characterSettingsTarget = character;
+ this.characterSettingsOpen = true;
+ }
+
+ /**
+ * Closes the character settings modal.
+ */
+ closeCharacterSettings() {
+ this.characterSettingsOpen = false;
+ this.characterSettingsTarget = null;
+ }
}
export const uiState = new UIState();
diff --git a/frontend/src/lib/types/IDataModel.ts b/frontend/src/lib/types/IDataModel.ts
index d4669284..8d01d24f 100644
--- a/frontend/src/lib/types/IDataModel.ts
+++ b/frontend/src/lib/types/IDataModel.ts
@@ -184,6 +184,16 @@ export const AdvancedConfigSchema = z
export const SettingsSchema = z
.object({
+ /**
+ * Global font size in pixels.
+ * Default is 16px (Medium).
+ */
+ fontSize: z.number().min(10).max(32).default(16),
+ /**
+ * Global font family.
+ * Default is "Noto Sans KR".
+ */
+ fontFamily: z.string().default("Noto Sans KR"),
/**
* Theme preference for the application interface.
*/
diff --git a/frontend/src/lib/utils/fontUtils.ts b/frontend/src/lib/utils/fontUtils.ts
new file mode 100644
index 00000000..60d76a07
--- /dev/null
+++ b/frontend/src/lib/utils/fontUtils.ts
@@ -0,0 +1,51 @@
+/**
+ * Font Utilities
+ * Handles supported fonts and dynamic loading of Google Fonts.
+ */
+
+export interface FontDefinition {
+ name: string;
+ value: string;
+ type: "system" | "google";
+}
+
+export const SUPPORTED_FONTS: FontDefinition[] = [
+ // System Fonts
+ { name: "System Default", value: "system-ui", type: "system" },
+ { name: "Monospace", value: "monospace", type: "system" },
+ { name: "Serif", value: "serif", type: "system" },
+ { name: "Sans-serif", value: "sans-serif", type: "system" },
+
+ // Google Fonts
+ { name: "Noto Sans KR", value: "Noto Sans KR", type: "google" },
+ { name: "Roboto", value: "Roboto", type: "google" },
+ { name: "Open Sans", value: "Open Sans", type: "google" },
+ { name: "Lato", value: "Lato", type: "google" },
+ { name: "Montserrat", value: "Montserrat", type: "google" },
+ { name: "Poppins", value: "Poppins", type: "google" },
+];
+
+/**
+ * Loads a Google Font dynamically by injecting a tag.
+ * Does nothing if the font is a system font or already loaded.
+ * @param fontFamily The name of the font family to load.
+ */
+export function loadFont(fontFamily: string) {
+ const font = SUPPORTED_FONTS.find((f) => f.value === fontFamily);
+
+ if (!font || font.type !== "google") {
+ return;
+ }
+
+ const fontId = `font-${fontFamily.replace(/\s+/g, "-").toLowerCase()}`;
+ if (document.getElementById(fontId)) {
+ return; // Already loaded
+ }
+
+ const link = document.createElement("link");
+ link.id = fontId;
+ link.rel = "stylesheet";
+ link.href = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/\s+/g, "+")}:wght@300;400;500;700&display=swap`;
+
+ document.head.appendChild(link);
+}
diff --git a/frontend/src/lib/workers/workerClient.ts b/frontend/src/lib/workers/workerClient.ts
index 2cecb0cd..75014bb8 100644
--- a/frontend/src/lib/workers/workerClient.ts
+++ b/frontend/src/lib/workers/workerClient.ts
@@ -33,13 +33,23 @@ function createWorkerApi(worker: Worker): WorkerApi {
void api.setLogReceiver(Comlink.proxy(logReceiver));
}
- return {
- ...api,
- terminate(this) {
- this.disabled = true;
- worker.terminate();
+ // Proxy api again
+
+ return new Proxy>(api as WorkerApi, {
+ get: (target, prop) => {
+ if (prop === "terminate") {
+ return function (this: WorkerApi) {
+ this.disabled = true;
+ worker.terminate();
+ };
+ }
+ if (prop === "disabled") {
+ return false;
+ }
+ if (typeof prop == "symbol") return Reflect.get(target, prop);
+ return target[prop as keyof T];
},
- };
+ });
}
// Used example's one, but actually all worker import have the same type.
type WorkerImport = typeof import("@worker/example/main?worker");
diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
index 5ad089c5..6f8a78bc 100644
--- a/frontend/src/routes/Home.svelte
+++ b/frontend/src/routes/Home.svelte
@@ -1,6 +1,6 @@
{#await Promise.all([characterLayoutPromise, chatAreaPromise])}
-
- Loading chat experience...
-
+ Loading...
{:then [{ default: CharacterLayout }, { default: ChatArea }]}
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
index 57fd4fd7..62ff9ec6 100644
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -24,13 +24,20 @@ interface ImportMetaEnv {
*/
readonly VITEST?: boolean;
/**
- * API key for Gemini LLM access.
- * If exists, enables integration tests with the real Gemini API.
- * Optional.
+ * Indicates if Vitest is running in browser mode.
+ * "false" on non-testing or node mode.
*/
- readonly GEMINI_API_KEY?: string;
+ readonly VITEST_BROWSER_MODE: "true" | "false";
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
+
+// No SharedArrayBuffer, we can't use it due to browser
+interface SharedArrayBuffer {
+ readonly [Symbol.toStringTag]: "SharedArrayBuffer";
+}
+type ArrayBufferLike = ArrayBuffer;
+// eslint-disable-next-line no-var
+declare var SharedArrayBuffer: never;
diff --git a/frontend/static/_headers b/frontend/static/_headers
new file mode 100644
index 00000000..95d4444e
--- /dev/null
+++ b/frontend/static/_headers
@@ -0,0 +1,9 @@
+
+/*
+ Cross-Origin-Embedder-Policy: require-corp
+ Cross-Origin-Opener-Policy: same-origin
+ X-Content-Type-Options: nosniff
+ X-Frame-Options: DENY
+ Referrer-Policy: strict-origin-when-cross-origin
+ Permissions-Policy: camera=(), microphone=(), geolocation=()
+ Origin-Agent-Cluster: ?1
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
deleted file mode 100644
index 2b43c7be..00000000
--- a/frontend/tailwind.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-//@ts-nocheck
-
-import daisyui from "daisyui";
-/** @type {import('tailwindcss').Config} */
-export default {
- content: ["./src/**/*.{html,js,svelte,ts}"],
- theme: {
- extend: {},
- },
- plugins: [daisyui],
- daisyui: {
- themes: ["light", "dark", "cupcake"],
- },
-};
diff --git a/frontend/test/browser/Sidebar.test.ts b/frontend/test/browser/Sidebar.test.ts
deleted file mode 100644
index e464a68e..00000000
--- a/frontend/test/browser/Sidebar.test.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { test, expect, describe, vi } from "vitest";
-import { render } from "vitest-browser-svelte";
-import { expectTypeOf } from "vitest";
-import Sidebar from "@/components/Sidebar.svelte";
-import { uiState } from "@/lib/stores/ui.svelte";
-
-// Mock uiState
-vi.mock("@/lib/stores/ui.svelte", () => ({
- uiState: {
- openSettingsModal: vi.fn(),
- settingsModalOpen: false,
- closeSettingsModal: vi.fn(),
- },
-}));
-
-describe("Sidebar Component", () => {
- test("renders correctly", async () => {
- const { getByText } = render(Sidebar);
- await expect.element(getByText("ArisuTalk")).toBeVisible();
- });
-
- test("toggles sidebar", async () => {
- const toggleMock = vi.fn();
- const { getByLabelText } = render(Sidebar, {
- onToggle: toggleMock,
- collapsed: false,
- });
-
- const toggleBtn = getByLabelText("Collapse sidebar");
- await toggleBtn.click();
- expect(toggleMock).toHaveBeenCalled();
- });
-
- test("opens settings modal", async () => {
- vi.spyOn(uiState, "openSettingsModal");
- const { getByText } = render(Sidebar);
-
- await getByText("Settings").click();
- expect(uiState.openSettingsModal).toHaveBeenCalled();
- });
-
- test("types check", () => {
- expectTypeOf(uiState.openSettingsModal).toBeFunction();
- expectTypeOf(uiState.settingsModalOpen).toBeBoolean();
- });
-});
diff --git a/frontend/test/browser/LogLevelSelector.test.ts b/frontend/test/browser/components/LogLevelSelector.test.ts
similarity index 100%
rename from frontend/test/browser/LogLevelSelector.test.ts
rename to frontend/test/browser/components/LogLevelSelector.test.ts
diff --git a/frontend/test/browser/MarkdownRenderer.test.ts b/frontend/test/browser/components/MarkdownRenderer.test.ts
similarity index 100%
rename from frontend/test/browser/MarkdownRenderer.test.ts
rename to frontend/test/browser/components/MarkdownRenderer.test.ts
diff --git a/frontend/test/browser/button.test.ts b/frontend/test/browser/components/button.test.ts
similarity index 96%
rename from frontend/test/browser/button.test.ts
rename to frontend/test/browser/components/button.test.ts
index a56a4c1b..35c4a227 100644
--- a/frontend/test/browser/button.test.ts
+++ b/frontend/test/browser/components/button.test.ts
@@ -1,6 +1,6 @@
import { test, expect, describe, vi } from "vitest";
import { render } from "vitest-browser-svelte";
-import ButtonTestWrapper from "./ButtonTestWrapper.svelte";
+import ButtonTestWrapper from "../wrappers/ButtonTestWrapper.svelte";
describe("Button Component", () => {
test("renders with accessible name and is visible", async () => {
diff --git a/frontend/test/browser/features/character/CharacterAssetsSettings.test.ts b/frontend/test/browser/features/character/CharacterAssetsSettings.test.ts
new file mode 100644
index 00000000..f5cc3321
--- /dev/null
+++ b/frontend/test/browser/features/character/CharacterAssetsSettings.test.ts
@@ -0,0 +1,177 @@
+///
+
+import { test, expect, describe, vi, beforeEach, type Mock } from "vitest";
+import { render } from "vitest-browser-svelte";
+import CharacterAssetsSettings from "@/features/character/components/settingsSubpage/CharacterAssetsSettings.svelte";
+import type { Character } from "@arisutalk/character-spec/v0/Character";
+import type { IAssetStorageAdapter } from "@/lib/interfaces";
+
+// Mock the asset storage resolver
+const mockAssetStorage: IAssetStorageAdapter = {
+ init: vi.fn(async () => {}),
+ saveAsset: vi.fn(async (name: string) => new URL(`local://opfs/${name}`)),
+ getAssetUrl: vi.fn(async () => "blob:mock-url"),
+ getAssetBlob: vi.fn(async () => new Blob()),
+ deleteAsset: vi.fn(async () => {}),
+};
+
+vi.mock("@/features/character/adapters/assetStorage/assetStorageResolver", () => ({
+ getAssetStorage: () => mockAssetStorage,
+}));
+
+describe("CharacterAssetsSettings Component", () => {
+ let mockCharacter: Character;
+ let onChangeSpy: Mock<(character: Character) => void>;
+
+ beforeEach(() => {
+ onChangeSpy = vi.fn(() => {});
+ mockCharacter = {
+ id: "char-1",
+ specVersion: 0,
+ name: "Test Character",
+ description: "A test character",
+ avatarUrl: "",
+ assets: { assets: [] },
+ prompt: {
+ description: "",
+ authorsNote: "",
+ lorebook: { config: { tokenLimit: 0 }, data: [] },
+ },
+ executables: {
+ runtimeSetting: { mem: undefined, timeout: 30000 },
+ replaceHooks: {
+ display: [],
+ input: [],
+ output: [],
+ request: [],
+ },
+ },
+ metadata: {
+ author: "",
+ license: "",
+ version: "1.0.0",
+ distributedOn: "",
+ additionalInfo: "",
+ },
+ };
+ });
+
+ test("renders empty state correctly", async () => {
+ const { getByText } = render(CharacterAssetsSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ await expect.element(getByText("No assets yet.")).toBeVisible();
+ });
+
+ test("renders upload section", async () => {
+ const { getByRole, container } = render(CharacterAssetsSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ const uploadInput = container.querySelector("#asset-upload");
+ expect(uploadInput).toBeTruthy();
+
+ const uploadButton = getByRole("button", { name: "Upload Asset" });
+ await expect.element(uploadButton).toBeVisible();
+ });
+
+ test("shows image assets section when image exists", async () => {
+ mockCharacter.assets.assets = [
+ {
+ id: "asset-1",
+ name: "portrait.png",
+ mimeType: "image/png",
+ data: "local://opfs/portrait.png",
+ },
+ ];
+
+ const { getByText } = render(CharacterAssetsSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ await expect.element(getByText("Images")).toBeVisible();
+ });
+
+ test("shows other assets section when non-image exists", async () => {
+ mockCharacter.assets.assets = [
+ {
+ id: "asset-2",
+ name: "script.js",
+ mimeType: "application/javascript",
+ data: "local://opfs/script.js",
+ },
+ ];
+
+ const { getByText } = render(CharacterAssetsSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ await expect.element(getByText("Other Assets (1)")).toBeVisible();
+ });
+
+ test("calls onChange when deleting asset", async () => {
+ mockCharacter.assets.assets = [
+ {
+ id: "asset-3",
+ name: "delete-me.png",
+ mimeType: "image/png",
+ data: "local://opfs/delete-me.png",
+ },
+ ];
+
+ const { container } = render(CharacterAssetsSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ // Find the delete button (should be only one since we have only one asset)
+ await vi.waitFor(() => {
+ const deleteButton = container.querySelector('button[aria-label="Delete asset"]');
+ expect(deleteButton).toBeTruthy();
+ });
+
+ const deleteButton = container.querySelector(
+ 'button[aria-label="Delete asset"]'
+ ) as HTMLButtonElement;
+ deleteButton.click();
+
+ await vi.waitFor(() => {
+ expect(onChangeSpy).toHaveBeenCalled();
+ });
+ });
+
+ test("has draggable elements for reordering", async () => {
+ mockCharacter.assets.assets = [
+ {
+ id: "asset-4",
+ name: "first.png",
+ mimeType: "image/png",
+ data: "local://opfs/first.png",
+ },
+ {
+ id: "asset-5",
+ name: "second.png",
+ mimeType: "image/png",
+ data: "local://opfs/second.png",
+ },
+ ];
+
+ const { container } = render(CharacterAssetsSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ await vi.waitFor(() => {
+ const draggables = container.querySelectorAll('[draggable="true"]');
+ expect(draggables).toHaveLength(2);
+ });
+
+ const draggables = container.querySelectorAll('[draggable="true"]');
+ expect(draggables).toHaveLength(2);
+ });
+});
diff --git a/frontend/test/browser/features/character/CharacterBasicSettings.test.ts b/frontend/test/browser/features/character/CharacterBasicSettings.test.ts
new file mode 100644
index 00000000..67805497
--- /dev/null
+++ b/frontend/test/browser/features/character/CharacterBasicSettings.test.ts
@@ -0,0 +1,153 @@
+///
+
+import { test, expect, describe, vi, beforeEach, type Mock } from "vitest";
+import { render } from "vitest-browser-svelte";
+import CharacterBasicSettings from "@/features/character/components/settingsSubpage/CharacterBasicSettings.svelte";
+import type { Character } from "@arisutalk/character-spec/v0/Character";
+import type { IAssetStorageAdapter } from "@/lib/interfaces";
+import { cloneDeep } from "lodash-es";
+
+// Mock the asset storage resolver
+const mockAssetStorage: IAssetStorageAdapter = {
+ init: vi.fn(async () => {}),
+ saveAsset: vi.fn(async (name: string) => new URL(`local://opfs/${name}`)),
+ getAssetUrl: vi.fn(async (url: URL) => `blob:mock-url-${url.pathname.split("/").pop()}`),
+ getAssetBlob: vi.fn(async () => new Blob()),
+ deleteAsset: vi.fn(async () => {}),
+};
+
+vi.mock("@/features/character/adapters/assetStorage/assetStorageResolver", () => ({
+ getAssetStorage: () => mockAssetStorage,
+}));
+
+describe("CharacterBasicSettings Component", () => {
+ let mockCharacter: Character;
+ let onChangeSpy: Mock<(character: Character) => void>;
+
+ beforeEach(() => {
+ onChangeSpy = vi.fn(() => {});
+ mockCharacter = {
+ id: "char-1",
+ specVersion: 0,
+ name: "Test Character",
+ description: "A test character",
+ avatarUrl: "",
+ assets: { assets: [] },
+ prompt: {
+ description: "",
+ authorsNote: "",
+ lorebook: { config: { tokenLimit: 0 }, data: [] },
+ },
+ executables: {
+ runtimeSetting: { mem: undefined, timeout: 30000 },
+ replaceHooks: {
+ display: [],
+ input: [],
+ output: [],
+ request: [],
+ },
+ },
+ metadata: {
+ author: "",
+ license: "",
+ version: "1.0.0",
+ distributedOn: "",
+ additionalInfo: "",
+ },
+ };
+ });
+
+ test("renders basic fields", async () => {
+ const { getByLabelText } = render(CharacterBasicSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ await expect.element(getByLabelText("Name")).toBeVisible();
+ await expect.element(getByLabelText("Description")).toBeVisible();
+ });
+
+ test("shows asset picker when image assets exist", async () => {
+ mockCharacter.assets.assets = [
+ {
+ id: "asset-1",
+ name: "avatar.png",
+ mimeType: "image/png",
+ data: "local://opfs/avatar.png",
+ },
+ ];
+
+ const { getByLabelText, getByText } = render(CharacterBasicSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ await expect.element(getByText("Select from assets:")).toBeVisible();
+ await expect.element(getByLabelText("Select avatar.png as avatar")).toBeVisible();
+ });
+
+ test("calls onChange when an asset is clicked", async () => {
+ const assetData = "local://opfs/avatar.png";
+ mockCharacter.assets.assets = [
+ {
+ id: "asset-1",
+ name: "avatar.png",
+ mimeType: "image/png",
+ data: assetData,
+ },
+ ];
+
+ const { getByLabelText } = render(CharacterBasicSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ const assetButton = getByLabelText("Select avatar.png as avatar");
+ await assetButton.click();
+
+ expect(onChangeSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ avatarUrl: assetData,
+ })
+ );
+ });
+
+ test("manual URL settings is hidden by default but can be toggled", async () => {
+ const screen = render(CharacterBasicSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ const manualUrlInput = screen.getByRole("textbox", {
+ name: "Avatar External URL / Storage Key",
+ includeHidden: true,
+ //includeHidden: true, // vitest-browser might handle this differently, but let's keep it safe
+ });
+
+ // Wait for potential async rendering (though not usually needed for initial render)
+ // Check visibility.
+ // Note: DaisyUI collapse uses checkbox. If not checked, content has max-height: 0 etc.
+ await expect.element(manualUrlInput).not.toBeVisible();
+
+ const collapseCheckbox = screen.container.querySelector(
+ ".collapse input[type='checkbox']"
+ ) as HTMLInputElement;
+ collapseCheckbox.click();
+
+ await expect.element(manualUrlInput).toBeVisible();
+ });
+
+ test("shows avatar preview when avatarUrl is set", async () => {
+ const character = cloneDeep(mockCharacter);
+ character.avatarUrl = "https://example.com/avatar.png";
+
+ const { getByAltText } = render(CharacterBasicSettings, {
+ character,
+ onChange: onChangeSpy,
+ });
+
+ const preview = getByAltText("Avatar preview");
+ await expect.element(preview).toBeVisible();
+ await expect.element(preview).toHaveAttribute("src", character.avatarUrl);
+ });
+});
diff --git a/frontend/test/browser/CharacterCard.test.ts b/frontend/test/browser/features/character/CharacterCard.test.ts
similarity index 100%
rename from frontend/test/browser/CharacterCard.test.ts
rename to frontend/test/browser/features/character/CharacterCard.test.ts
diff --git a/frontend/test/browser/CharacterForm.test.ts b/frontend/test/browser/features/character/CharacterForm.test.ts
similarity index 100%
rename from frontend/test/browser/CharacterForm.test.ts
rename to frontend/test/browser/features/character/CharacterForm.test.ts
diff --git a/frontend/test/browser/features/character/CharacterHooksSettings.test.ts b/frontend/test/browser/features/character/CharacterHooksSettings.test.ts
new file mode 100644
index 00000000..464624d5
--- /dev/null
+++ b/frontend/test/browser/features/character/CharacterHooksSettings.test.ts
@@ -0,0 +1,265 @@
+///
+
+import { test, expect, describe, vi, beforeEach, type Mock } from "vitest";
+import { render } from "vitest-browser-svelte";
+import CharacterHooksSettings from "@/features/character/components/settingsSubpage/CharacterHooksSettings.svelte";
+import type { Character } from "@arisutalk/character-spec/v0/Character";
+
+describe("CharacterHooksSettings Component", () => {
+ let mockCharacter: Character;
+ let onChangeSpy: Mock<(character: Character) => void>;
+
+ beforeEach(() => {
+ onChangeSpy = vi.fn(() => {});
+ mockCharacter = {
+ id: "char-1",
+ specVersion: 0,
+ name: "Test Character",
+ description: "A test character",
+ avatarUrl: "",
+ assets: { assets: [] },
+ prompt: {
+ description: "",
+ authorsNote: "",
+ lorebook: { config: { tokenLimit: 0 }, data: [] },
+ },
+ executables: {
+ runtimeSetting: { mem: undefined, timeout: 30000 },
+ replaceHooks: {
+ display: [],
+ input: [],
+ output: [],
+ request: [],
+ },
+ },
+ metadata: {
+ author: "",
+ license: "",
+ version: "1.0.0",
+ distributedOn: "",
+ additionalInfo: "",
+ },
+ };
+ });
+
+ test("renders runtime settings correctly", async () => {
+ const screen = render(CharacterHooksSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ // Expand Runtime Settings - DaisyUI collapse uses a hidden checkbox
+ const collapseCheckbox = screen.container.querySelector(
+ ".collapse input[type='checkbox']"
+ ) as HTMLInputElement;
+ collapseCheckbox.click();
+
+ const { getByLabelText } = screen;
+
+ const memInput = getByLabelText(/Memory \(MB\)/i);
+ const timeoutInput = getByLabelText(/Timeout \(ms\)/i);
+
+ await expect.element(memInput).toBeVisible();
+ await expect.element(memInput).toHaveValue(null);
+ await expect.element(timeoutInput).toHaveValue(30000);
+ });
+
+ test("updates runtime settings", async () => {
+ const screen = render(CharacterHooksSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ // Expand Runtime Settings - DaisyUI collapse uses a hidden checkbox
+ const collapseCheckbox = screen.container.querySelector(
+ ".collapse input[type='checkbox']"
+ ) as HTMLInputElement;
+ collapseCheckbox.click();
+
+ const { getByLabelText } = screen;
+
+ const memInput = getByLabelText(/Memory \(MB\)/i);
+ await expect.element(memInput).toBeVisible();
+
+ await memInput.fill("1024");
+ /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+ expect(onChangeSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ executables: expect.objectContaining({
+ runtimeSetting: expect.objectContaining({
+ mem: 1024,
+ }),
+ }),
+ })
+ );
+ /* eslint-enable @typescript-eslint/no-unsafe-assignment */
+ });
+
+ test("switches between hook tabs", async () => {
+ mockCharacter.executables.replaceHooks.input = [
+ {
+ input: "hi",
+ output: "hello",
+ meta: {
+ type: "string",
+ caseSensitive: false,
+ priority: 0,
+ isInputPatternScripted: false,
+ isOutputScripted: false,
+ },
+ },
+ ];
+
+ const { getByRole, getByText } = render(CharacterHooksSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ await expect.element(getByText("No display hooks.")).toBeVisible();
+
+ const tab = getByRole("tab", { name: /Input/i });
+ await tab.click();
+
+ await expect.element(getByText("hi → hello")).toBeVisible();
+ });
+
+ test("adds a new hook", async () => {
+ const { getByRole } = render(CharacterHooksSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ await getByRole("button", { name: /Add Hook/i }).click();
+
+ expect(onChangeSpy).toHaveBeenCalled();
+ const calledArg = onChangeSpy.mock.calls[0][0];
+ expect(calledArg.executables.replaceHooks.display).toHaveLength(1);
+ });
+
+ test("edits a hook", async () => {
+ mockCharacter.executables.replaceHooks.display = [
+ {
+ input: "foo",
+ output: "bar",
+ meta: {
+ type: "string",
+ caseSensitive: false,
+ priority: 0,
+ isInputPatternScripted: false,
+ isOutputScripted: false,
+ },
+ },
+ ];
+
+ const { getByText, getByLabelText } = render(CharacterHooksSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ await getByText("foo → bar").click();
+
+ const inputField = getByLabelText("Input Pattern");
+ await expect.element(inputField).toBeVisible();
+ await inputField.fill("baz");
+ /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+ expect(onChangeSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ executables: expect.objectContaining({
+ replaceHooks: expect.objectContaining({
+ display: expect.arrayContaining([
+ expect.objectContaining({ input: "baz" } as const),
+ ]),
+ }),
+ }),
+ })
+ );
+ /* eslint-enable @typescript-eslint/no-unsafe-assignment */
+ });
+
+ test("deletes a hook", async () => {
+ mockCharacter.executables.replaceHooks.display = [
+ {
+ input: "hookToRemove",
+ output: "",
+ meta: {
+ type: "string",
+ caseSensitive: false,
+ priority: 0,
+ isInputPatternScripted: false,
+ isOutputScripted: false,
+ },
+ },
+ ];
+
+ const { getByText, getByRole } = render(CharacterHooksSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ await getByText("hookToRemove → (empty)").click();
+
+ const delBtn = getByRole("button", { name: /Delete/i });
+ await expect.element(delBtn).toBeVisible();
+ await delBtn.click();
+
+ expect(onChangeSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+ executables: expect.objectContaining({
+ replaceHooks: expect.objectContaining({
+ display: [],
+ }),
+ }),
+ /* eslint-enable @typescript-eslint/no-unsafe-assignment */
+ })
+ );
+ });
+
+ test("handles regex type and case sensitive toggle", async () => {
+ mockCharacter.executables.replaceHooks.display = [
+ {
+ input: "test",
+ output: "",
+ meta: {
+ type: "string",
+ caseSensitive: false,
+ priority: 0,
+ isInputPatternScripted: false,
+ isOutputScripted: false,
+ },
+ },
+ ];
+
+ const { getByText, getByLabelText } = render(CharacterHooksSettings, {
+ character: mockCharacter,
+ onChange: onChangeSpy,
+ });
+
+ await getByText("test → (empty)").click();
+
+ const caseSensitiveCheckbox = getByLabelText("Case Sensitive");
+ await expect.element(caseSensitiveCheckbox).toBeVisible();
+
+ const typeSelect = getByLabelText("Type");
+ await expect.element(typeSelect).toBeVisible();
+
+ // Use selectOptions (plural)
+ await typeSelect.selectOptions("regex");
+
+ expect(onChangeSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+ executables: expect.objectContaining({
+ replaceHooks: expect.objectContaining({
+ display: expect.arrayContaining([
+ expect.objectContaining({
+ meta: expect.objectContaining({ type: "regex" }),
+ }),
+ ]),
+ }),
+ }),
+ /* eslint-enable @typescript-eslint/no-unsafe-assignment */
+ })
+ );
+ });
+});
diff --git a/frontend/test/browser/CharacterList.test.ts b/frontend/test/browser/features/character/CharacterList.test.ts
similarity index 100%
rename from frontend/test/browser/CharacterList.test.ts
rename to frontend/test/browser/features/character/CharacterList.test.ts
diff --git a/frontend/test/browser/features/character/CharacterSettingsModal.test.ts b/frontend/test/browser/features/character/CharacterSettingsModal.test.ts
new file mode 100644
index 00000000..aeeb72d1
--- /dev/null
+++ b/frontend/test/browser/features/character/CharacterSettingsModal.test.ts
@@ -0,0 +1,164 @@
+///
+
+import { test, expect, describe, vi, beforeEach, afterEach } from "vitest";
+import { render } from "vitest-browser-svelte";
+import CharacterSettingsModal from "@/features/character/components/CharacterSettingsModal.svelte";
+import { uiState } from "@/lib/stores/ui.svelte";
+import { characterStore } from "@/features/character/stores/characterStore.svelte";
+import type { Character } from "@arisutalk/character-spec/v0/Character";
+import { Logger } from "@common/logger/Logger";
+
+// Mock dependencies
+vi.mock("@/features/character/stores/characterStore.svelte", () => {
+ return {
+ characterStore: {
+ characters: [],
+ update: vi.fn().mockResolvedValue(undefined),
+ reorder: vi.fn(),
+ add: vi.fn().mockResolvedValue(undefined),
+ },
+ };
+});
+
+vi.mock("@common/logger/Logger", () => ({
+ Logger: {
+ structured: vi.fn(),
+ debug: vi.fn(),
+ error: vi.fn(),
+ },
+}));
+
+describe("CharacterSettingsModal Component", () => {
+ let mockCharacter: Character;
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ mockCharacter = {
+ id: "char-1",
+ specVersion: 0,
+ name: "Test Character",
+ description: "A test character",
+ avatarUrl: "https://example.com/avatar.png",
+ assets: { assets: [] },
+ prompt: {
+ description: "Character Description",
+ authorsNote: "Author's Note",
+ lorebook: {
+ config: { tokenLimit: 1000 },
+ data: [
+ {
+ id: "entry-1",
+ name: "Lore Entry",
+ content: "Lore Content",
+ condition: [{ type: "always" }],
+ multipleConditionResolveStrategy: "any",
+ enabled: true,
+ priority: 0,
+ },
+ ],
+ },
+ },
+ executables: {
+ runtimeSetting: { mem: undefined, timeout: 30000 },
+ replaceHooks: { display: [], input: [], output: [], request: [] },
+ },
+ metadata: {
+ author: "Test Author",
+ license: "MIT",
+ version: "1.0.0",
+ distributedOn: "https://example.com",
+ additionalInfo: "Notes",
+ },
+ };
+
+ // Initialize uiState
+ uiState.characterSettingsOpen = true;
+ uiState.characterSettingsTarget = mockCharacter;
+
+ // Initialize characterStore.characters for the index lookups
+ characterStore.characters = [mockCharacter];
+ });
+
+ // Ensure timers are cleaned up even if test fails
+ // This prevents pollution of other tests like ChatPersion.test.ts
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ test("renders modal when open", async () => {
+ const { getByText, getByRole } = render(CharacterSettingsModal);
+
+ // Check header
+ await expect
+ .element(getByText("Test Character Settings", { exact: true }))
+ .toBeInTheDocument();
+
+ // Check sidebar tabs
+ await expect.element(getByRole("button", { name: /Basic Settings/i })).toBeInTheDocument();
+ await expect.element(getByRole("button", { name: /Prompt Settings/i })).toBeInTheDocument();
+ });
+
+ test("switches tabs correctly", async () => {
+ const { getByRole, getByText, getByLabelText } = render(CharacterSettingsModal);
+
+ // Initial tab is basic
+ await expect.element(getByLabelText(/Name/i)).toBeInTheDocument();
+
+ // Switch to Prompt tab
+ const promptTab = getByRole("button", { name: /Prompt Settings/i });
+ await promptTab.click();
+
+ // Wait for tab content
+ await expect.element(getByRole("heading", { name: /Prompt Configuration/i })).toBeVisible();
+ await expect.element(getByLabelText(/Character Prompt Description/i)).toBeVisible();
+
+ // Switch to Lorebook tab
+ const lorebookTab = getByRole("button", { name: /Lorebook Settings/i });
+ await lorebookTab.click();
+ await expect.element(getByRole("heading", { name: "Lorebook", level: 3 })).toBeVisible();
+ await expect.element(getByText(/Entries \(1\)/i)).toBeVisible();
+ });
+
+ test("closes modal when close button is clicked", async () => {
+ const { getByLabelText } = render(CharacterSettingsModal);
+
+ const closeButton = getByLabelText("Close");
+ await closeButton.click();
+
+ expect(uiState.characterSettingsOpen).toBe(false);
+ });
+
+ test("autosaves when changes are made", async () => {
+ const { getByLabelText } = render(CharacterSettingsModal);
+
+ const nameInput = getByLabelText(/Name/i);
+ await nameInput.fill("Updated Name");
+
+ // Wait for debounce (300ms) + buffer
+ await new Promise((r) => setTimeout(r, 600));
+
+ expect(characterStore.update).toHaveBeenCalledWith(
+ 0,
+ expect.objectContaining({
+ name: "Updated Name",
+ })
+ );
+
+ expect(Logger.structured).toHaveBeenCalledWith("character.autosave", expect.anything());
+ });
+
+ test("handles lorebook entry addition", async () => {
+ const { getByRole, getByText } = render(CharacterSettingsModal);
+
+ // Switch to Lorebook tab
+ await getByRole("button", { name: /Lorebook Settings/i }).click();
+
+ // Click Add Entry
+ const addButton = getByRole("button", { name: /Add Entry/i });
+ await addButton.click();
+
+ // Check if new entry appears
+ await expect.element(getByText(/Entries \(2\)/i)).toBeInTheDocument();
+ });
+});
diff --git a/frontend/test/browser/CharacterSidebar.test.ts b/frontend/test/browser/features/character/CharacterSidebar.test.ts
similarity index 93%
rename from frontend/test/browser/CharacterSidebar.test.ts
rename to frontend/test/browser/features/character/CharacterSidebar.test.ts
index 35fd1c51..6d2ce62b 100644
--- a/frontend/test/browser/CharacterSidebar.test.ts
+++ b/frontend/test/browser/features/character/CharacterSidebar.test.ts
@@ -16,7 +16,7 @@ vi.mock("@/lib/stores/ui.svelte", () => ({
describe("CharacterSidebar Component", () => {
let mockCharacters: Character[];
- let mockOnSelect: (id: string) => void;
+ let mockOnSelect: (id: string | null) => void;
let mockOnAdd: () => void;
let mockOnPersona: () => void;
@@ -157,19 +157,21 @@ describe("CharacterSidebar Component", () => {
});
test("highlights selected character", async () => {
- const { getByLabelText } = render(CharacterSidebar, {
+ const { container } = render(CharacterSidebar, {
selectedCharacterId: "char-1",
onSelect: mockOnSelect,
onAdd: mockOnAdd,
onPersona: mockOnPersona,
});
- const characterButton = getByLabelText("Character 1");
-
- // The inner div of the button has the rounded-xl shape when active
- const innerDiv = characterButton.element().querySelector("div");
+ //Wait for rendering
+ await vi.waitFor(() => {
+ const items = container.querySelectorAll('[role="option"]');
+ expect(items.length).toBeGreaterThan(0);
+ });
- await expect.element(innerDiv).toHaveClass(/rounded-xl/);
+ const selectedOption = container.querySelector('[aria-selected="true"]');
+ expect(selectedOption).toBeTruthy();
});
test("renders divider before action buttons", async () => {
diff --git a/frontend/test/browser/CharacterSidebarItem.test.ts b/frontend/test/browser/features/character/CharacterSidebarItem.test.ts
similarity index 100%
rename from frontend/test/browser/CharacterSidebarItem.test.ts
rename to frontend/test/browser/features/character/CharacterSidebarItem.test.ts
diff --git a/frontend/test/browser/character.test.ts b/frontend/test/browser/features/character/character.test.ts
similarity index 95%
rename from frontend/test/browser/character.test.ts
rename to frontend/test/browser/features/character/character.test.ts
index c55b7eab..76e875b3 100644
--- a/frontend/test/browser/character.test.ts
+++ b/frontend/test/browser/features/character/character.test.ts
@@ -1,6 +1,6 @@
import { test, expect, describe, vi, beforeEach } from "vitest";
import { render } from "vitest-browser-svelte";
-import CharacterLayoutTestWrapper from "./CharacterLayoutTestWrapper.svelte";
+import CharacterLayoutTestWrapper from "../../wrappers/CharacterLayoutTestWrapper.svelte";
import { characterStore } from "@/features/character/stores/characterStore.svelte";
import type { Character } from "@arisutalk/character-spec/v0/Character";
diff --git a/frontend/test/browser/ChatArea.test.ts b/frontend/test/browser/features/chat/ChatArea.test.ts
similarity index 100%
rename from frontend/test/browser/ChatArea.test.ts
rename to frontend/test/browser/features/chat/ChatArea.test.ts
diff --git a/frontend/test/browser/ChatList.test.ts b/frontend/test/browser/features/chat/ChatList.test.ts
similarity index 100%
rename from frontend/test/browser/ChatList.test.ts
rename to frontend/test/browser/features/chat/ChatList.test.ts
diff --git a/frontend/test/browser/PersonaForm.test.ts b/frontend/test/browser/features/persona/PersonaForm.test.ts
similarity index 100%
rename from frontend/test/browser/PersonaForm.test.ts
rename to frontend/test/browser/features/persona/PersonaForm.test.ts
diff --git a/frontend/test/browser/PersonaList.test.ts b/frontend/test/browser/features/persona/PersonaList.test.ts
similarity index 100%
rename from frontend/test/browser/PersonaList.test.ts
rename to frontend/test/browser/features/persona/PersonaList.test.ts
diff --git a/frontend/test/browser/GenerationParameters.test.ts b/frontend/test/browser/features/settings/GenerationParameters.test.ts
similarity index 99%
rename from frontend/test/browser/GenerationParameters.test.ts
rename to frontend/test/browser/features/settings/GenerationParameters.test.ts
index a49b3531..aba88758 100644
--- a/frontend/test/browser/GenerationParameters.test.ts
+++ b/frontend/test/browser/features/settings/GenerationParameters.test.ts
@@ -1,7 +1,7 @@
///
import { test, expect, describe, vi, beforeEach } from "vitest";
import { render } from "vitest-browser-svelte";
-import Wrapper from "./GenerationParametersTestWrapper.svelte";
+import Wrapper from "../../wrappers/GenerationParametersTestWrapper.svelte";
import { settings } from "@/lib/stores/settings.svelte";
import type { LLMConfig } from "@/lib/types/IDataModel";
diff --git a/frontend/test/browser/features/settings/PromptSettings.test.ts b/frontend/test/browser/features/settings/PromptSettings.test.ts
new file mode 100644
index 00000000..66f0d826
--- /dev/null
+++ b/frontend/test/browser/features/settings/PromptSettings.test.ts
@@ -0,0 +1,19 @@
+import { test, expect } from "vitest";
+import { render } from "vitest-browser-svelte";
+import PromptSettings from "@/components/settingSubpage/PromptSettings.svelte";
+import { settings } from "@/lib/stores/settings.svelte";
+
+test("PromptSettings renders correctly", async () => {
+ const { getByText, getByRole } = render(PromptSettings);
+
+ // Check if main title exists
+ await expect.element(getByText("Prompt Settings")).toBeVisible();
+
+ // Check if textarea exists with current value
+ // Note: Using getByRole('textbox') since