Spaces:

ninjacricket
/

sorin-s-cat

Running

App Files Files Community

ninjacricket commited on Jun 26

Commit

f20e37d

verified ·

1 Parent(s): 2ec2ed8

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +2813 -15

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Sorin S Cat
-emoji: 💻
-colorFrom: blue
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: sorin-s-cat
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,2817 @@
-<!doctype html>
-<html>
 	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
 	</head>
 	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
 		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
 	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>BAIRC-INTERNAL-COM-NETWORK</title>
+		<style>
+			/* CSS Variables for theming */
+			:root {
+				--bg-primary: #1a1a1a;
+				--bg-secondary: #2d2d2d;
+				--bg-tertiary: #3d3d3d;
+				--text-primary: #ffffff;
+				--text-secondary: #b0b0b0;
+				--accent: #00d4aa;
+				--accent-hover: #00b894;
+				--border: #404040;
+				--danger: #e74c3c;
+				--warning: #f39c12;
+				--success: #27ae60;
+				/* Custom colors for generated logs */
+				--log-console-border: #007bff; /* Blue */
+				--log-email-border: #ff8c00; /* Dark Orange */
+				--log-dream-border: #8a2be2; /* BlueViolet */
+				--log-internal-border: #dc3545; /* Red */
+			}
+			* {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+			}
+			body {
+				font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+				background: var(--bg-primary);
+				color: var(--text-primary);
+				line-height: 1.6;
+				overflow: hidden;
+			}
+			/* Layout Components */
+			.app-container {
+				display: flex;
+				height: 100vh;
+			}
+			.sidebar {
+				width: 280px;
+				background: var(--bg-secondary);
+				border-right: 1px solid var(--border);
+				display: flex;
+				flex-direction: column;
+				transition: width 0.3s;
+			}
+			.conversations-sidebar {
+				width: 260px;
+				background: var(--bg-primary);
+				border-right: 1px solid var(--border);
+				display: flex;
+				flex-direction: column;
+			}
+			.main-content {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				overflow: hidden;
+			}
+			.chat-views-container {
+				display: flex;
+				flex: 1;
+				overflow: hidden;
+			}
+			/* Sidebar Sections */
+			.sidebar-section {
+				padding: 1rem;
+				border-bottom: 1px solid var(--border);
+				overflow-y: auto;
+			}
+			.sidebar-section.no-grow {
+				flex-grow: 0;
+				flex-shrink: 0;
+			}
+			.sidebar-section.grow {
+				flex-grow: 1;
+			}
+			.sidebar-section h3 {
+				margin-bottom: 0.75rem;
+				color: var(--accent);
+				font-size: 0.9rem;
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
+			}
+			/* Form Controls */
+			.form-group {
+				margin-bottom: 0.75rem;
+			}
+			.form-group label {
+				display: block;
+				margin-bottom: 0.25rem;
+				font-size: 0.85rem;
+				color: var(--text-secondary);
+			}
+			.form-control {
+				width: 100%;
+				padding: 0.5rem;
+				background: var(--bg-tertiary);
+				border: 1px solid var(--border);
+				border-radius: 4px;
+				color: var(--text-primary);
+				font-size: 0.85rem;
+			}
+			.form-control:focus {
+				outline: none;
+				border-color: var(--accent);
+			}
+			textarea.form-control {
+				resize: vertical;
+				min-height: 80px;
+			}
+			/* Buttons */
+			.btn {
+				padding: 0.5rem 1rem;
+				border: none;
+				border-radius: 4px;
+				cursor: pointer;
+				font-size: 0.85rem;
+				transition: all 0.2s;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				gap: 0.5rem;
+			}
+			.btn-primary {
+				background: var(--accent);
+				color: white;
+			}
+			.btn-primary:hover {
+				background: var(--accent-hover);
+			}
+			.btn-secondary {
+				background: var(--bg-tertiary);
+				color: var(--text-primary);
+				border: 1px solid var(--border);
+			}
+			.btn-secondary:hover {
+				background: var(--border);
+			}
+			.btn-danger {
+				background: var(--danger);
+				color: white;
+			}
+			.btn-small {
+				padding: 0.25rem 0.5rem;
+				font-size: 0.75rem;
+			}
+			.btn-icon {
+				background: none;
+				border: none;
+				color: var(--text-secondary);
+				padding: 0.25rem;
+				cursor: pointer;
+				border-radius: 4px;
+			}
+			.btn-icon:hover {
+				background: var(--bg-tertiary);
+				color: var(--text-primary);
+			}
+			/* Main Chat Interface */
+			.chat-header {
+				padding: 1rem;
+				background: var(--bg-secondary);
+				border-bottom: 1px solid var(--border);
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				gap: 1rem;
+			}
+			.chat-title {
+				font-size: 1.1rem;
+				font-weight: 600;
+			}
+			.chat-actions {
+				display: flex;
+				gap: 0.5rem;
+			}
+			.chat-view {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				overflow: hidden;
+				/* Added for split view */
+				border-right: 1px solid var(--border);
+			}
+			.chat-view:last-child {
+				border-right: none;
+			}
+			.messages-container {
+				flex: 1;
+				overflow-y: auto;
+				padding: 1rem;
+			}
+			.message {
+				margin-bottom: 1.5rem;
+				padding: 1rem;
+				border-radius: 8px;
+				max-width: 90%;
+				word-wrap: break-word;
+				position: relative;
+			}
+			.message.user {
+				background: var(--bg-secondary);
+				margin-left: auto;
+				border: 1px solid var(--border);
+			}
+			.message.assistant {
+				background: var(--bg-tertiary);
+				margin-right: auto;
+			}
+			/* Specific borders for generated log messages */
+			.message.assistant.log-console {
+				border: 2px solid var(--log-console-border);
+			}
+			.message.assistant.log-email {
+				border: 2px solid var(--log-email-border);
+			}
+			.message.assistant.log-dream {
+				border: 2px solid var(--log-dream-border);
+			}
+			.message.assistant.log-internal {
+				border: 2px solid var(--log-internal-border);
+			}
+			.message-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 0.5rem;
+				font-size: 0.8rem;
+				color: var(--text-secondary);
+			}
+			.message-content {
+				color: var(--text-primary);
+			}
+			.message-content pre {
+				background: var(--bg-primary);
+				padding: 0.75rem;
+				border-radius: 4px;
+				overflow-x: auto;
+				white-space: pre-wrap;
+				word-wrap: break-word;
+			}
+			.message-content code {
+				font-family: "Courier New", Courier, monospace;
+			}
+			.message-content code.language-inline {
+				background: var(--bg-primary);
+				padding: 0.1em 0.3em;
+				border-radius: 3px;
+			}
+			.message-actions {
+				position: absolute;
+				top: 0.5rem;
+				right: 0.5rem;
+				display: none;
+				gap: 0.25rem;
+				background: var(--bg-secondary);
+				padding: 0.25rem;
+				border-radius: 5px;
+				border: 1px solid var(--border);
+			}
+			.message:hover .message-actions {
+				display: flex;
+			}
+			/* Input Area */
+			.input-area {
+				padding: 1rem;
+				background: var(--bg-secondary);
+				border-top: 1px solid var(--border);
+			}
+			.input-container {
+				display: flex;
+				gap: 0.5rem;
+				align-items: flex-end;
+			}
+			.input-field-wrapper {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+			.input-field {
+				flex: 1;
+				min-height: 80px;
+				max-height: 200px;
+				resize: vertical;
+			}
+			.input-toolbar {
+				display: flex;
+				justify-content: flex-end;
+				padding-top: 0.25rem;
+				font-size: 0.75rem;
+				color: var(--text-secondary);
+			}
+			/* List Item Styling (for Prompts, Conversations, Notes) */
+			.list-item {
+				padding: 0.75rem;
+				background: var(--bg-tertiary);
+				border: 1px solid var(--border);
+				border-radius: 4px;
+				margin-bottom: 0.5rem;
+				cursor: pointer;
+				transition: all 0.2s;
+			}
+			.list-item:hover {
+				border-color: var(--accent);
+			}
+			.list-item.active {
+				border-color: var(--accent);
+				background: rgba(0, 212, 170, 0.1);
+			}
+			.list-item-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 0.25rem;
+			}
+			.list-item-name {
+				font-weight: 600;
+				color: var(--text-primary);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			.list-item-actions {
+				display: flex;
+				gap: 0.25rem;
+			}
+			.list-item-preview {
+				font-size: 0.8rem;
+				color: var(--text-secondary);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			/* Utility Classes */
+			.flex-between {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
+			.mb-1 {
+				margin-bottom: 1rem;
+			}
+			/* Loading Animation */
+			.loading {
+				display: inline-block;
+				width: 16px;
+				height: 16px;
+				border: 2px solid var(--border);
+				border-radius: 50%;
+				border-top-color: var(--accent);
+				animation: spin 1s ease-in-out infinite;
+			}
+			@keyframes spin {
+				to {
+					transform: rotate(360deg);
+				}
+			}
+			/* Scrollbar Styling */
+			::-webkit-scrollbar {
+				width: 8px;
+			}
+			::-webkit-scrollbar-track {
+				background: var(--bg-secondary);
+			}
+			::-webkit-scrollbar-thumb {
+				background: var(--border);
+				border-radius: 4px;
+			}
+			::-webkit-scrollbar-thumb:hover {
+				background: var(--accent);
+			}
+			/* Modal/Lightbox Styles */
+			.modal-overlay {
+				position: fixed;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background: rgba(0, 0, 0, 0.7);
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				z-index: 1000;
+				opacity: 0;
+				visibility: hidden;
+				transition:
+					opacity 0.3s,
+					visibility 0.3s;
+			}
+			.modal-overlay.visible {
+				opacity: 1;
+				visibility: visible;
+			}
+			.modal-content {
+				background: var(--bg-secondary);
+				padding: 2rem;
+				border-radius: 8px;
+				width: 90%;
+				max-width: 600px;
+				border: 1px solid var(--border);
+				transform: scale(0.95);
+				transition: transform 0.3s;
+			}
+			.modal-overlay.visible .modal-content {
+				transform: scale(1);
+			}
+			.modal-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 1.5rem;
+			}
+			.modal-title {
+				font-size: 1.25rem;
+				color: var(--accent);
+			}
+			.modal-close {
+				background: none;
+				border: none;
+				color: var(--text-secondary);
+				font-size: 1.5rem;
+				cursor: pointer;
+			}
+			.modal-body .form-group {
+				margin-bottom: 1rem;
+			}
+			.modal-body textarea.form-control {
+				min-height: 200px;
+			}
+			.modal-footer {
+				margin-top: 1.5rem;
+				display: flex;
+				justify-content: flex-end;
+				gap: 0.5rem;
+			}
+			/* Empty State */
+			#empty-state {
+				display: none;
+				height: 100%;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				text-align: center;
+				padding: 2rem;
+				color: var(--text-secondary);
+			}
+			/* Generate Logs Section */
+			.generate-logs {
+				padding: 1rem;
+				background: var(--bg-secondary);
+				border-top: 1px solid var(--border);
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.5rem;
+				justify-content: center;
+			}
+			.generate-logs h3 {
+				width: 100%;
+				text-align: center;
+				color: var(--text-secondary);
+				margin-bottom: 1rem;
+			}
+		</style>
 	</head>
 	<body>
+		<div class="app-container">
+			<!-- Conversations & Notebook Sidebar -->
+			<div class="conversations-sidebar">
+				<div class="sidebar-section grow" style="display: flex; flex-direction: column;">
+					<div class="flex-between mb-1">
+						<h3>💬 Conversations</h3>
+						<div class="chat-actions">
+							<button
+								class="btn btn-secondary btn-small"
+								onclick="newConversation()"
+								title="New Conversation"
+							>
+								+
+							</button>
+							<button
+								class="btn btn-secondary btn-small"
+								onclick="toggleSplitView()"
+								title="Split View"
+							>
+								↔
+							</button>
+							<button
+								class="btn btn-secondary btn-small"
+								onclick="exportBRF()"
+								title="Export BRF Data"
+							>
+								💾
+							</button>
+							<label
+								for="import-brf-file"
+								class="btn btn-secondary btn-small"
+								title="Import BRF Data"
+							>
+								📂
+							</label>
+							<input
+								type="file"
+								id="import-brf-file"
+								accept=".json"
+								style="display: none;"
+								onchange="handleBRFImport(event)"
+							/>
+						</div>
+					</div>
+					<div id="conversations-list" style="flex: 1; overflow-y: auto;"></div>
+				</div>
+				<div class="sidebar-section no-grow">
+					<div class="flex-between mb-1">
+						<h3>📒 Notebook</h3>
+						<button
+							class="btn btn-secondary btn-small"
+							onclick="openNoteModal()"
+							title="New Note"
+						>
+							+
+						</button>
+					</div>
+					<div id="notebook-list" style="max-height: 150px; overflow-y: auto;"></div>
+				</div>
+			</div>
+			<!-- Parameters & Prompts Sidebar -->
+			<div class="sidebar">
+				<!-- Model Parameters -->
+				<div class="sidebar-section no-grow">
+					<h3>⚙️ Parameters</h3>
+					<div class="form-group">
+						<label for="model">Model</label>
+						<select id="model" class="form-control">
+							<option value="deepseek-chat">deepseek-chat</option>
+							<option value="deepseek-coder">deepseek-coder</option>
+						</select>
+					</div>
+					<div class="form-group">
+						<label>Temperature: <span id="temp-value">0.7</span></label>
+						<input
+							type="range"
+							id="temperature"
+							class="form-control"
+							min="0"
+							max="2"
+							step="0.1"
+							value="0.7"
+						/>
+					</div>
+					<div class="form-group">
+						<label>Max Tokens</label>
+						<input
+							type="number"
+							id="max-tokens"
+							class="form-control"
+							value="2048"
+							min="1"
+						/>
+					</div>
+				</div>
+				<!-- System Prompts -->
+				<div class="sidebar-section grow" style="display: flex; flex-direction: column;">
+					<div class="flex-between mb-1">
+						<h3>📝 System Prompts</h3>
+						<button
+							class="btn btn-secondary btn-small"
+							onclick="openPromptModal()"
+							title="New Prompt"
+						>
+							+
+						</button>
+					</div>
+					<div id="prompts-list" style="flex: 1; overflow-y: auto;"></div>
+				</div>
+			</div>
+			<!-- Main Content -->
+			<div class="main-content">
+				<div id="empty-state" style="display: none;">
+					<h2 style="color: var(--text-primary); margin-bottom: 1rem;">
+						Welcome to the Chat Studio
+					</h2>
+					<p style="margin-bottom: 1.5rem;">
+						Select a conversation or create a new one to get started.
+					</p>
+					<button class="btn btn-primary" onclick="newConversation()">
+						+ New Conversation
+					</button>
+				</div>
+				<div id="chat-views-container" class="chat-views-container" style="display: none;">
+					<div id="chat-view-1" class="chat-view">
+						<!-- Chat Header -->
+						<div class="chat-header">
+							<div id="chat-title-1" class="chat-title"></div>
+							<div class="chat-actions">
+								<!-- New prompt selector for chat view 1 -->
+								<select
+									id="system-prompt-select-1"
+									class="form-control"
+									onchange="selectSystemPrompt(this.value, 1)"
+									style="width: auto; max-width: 180px;"
+								></select>
+								<button
+									class="btn btn-secondary btn-small"
+									onclick="exportChatMD(1)"
+									title="Export Conversation to Markdown"
+								>
+									Export MD
+								</button>
+								<button
+									class="btn btn-danger btn-small"
+									onclick="deleteConversation(AppState.activeChatViews[0].conversationId)"
+									title="Delete Conversation"
+								>
+									🗑️ Delete
+								</button>
+							</div>
+						</div>
+						<!-- Messages -->
+						<div class="messages-container" id="messages-1"></div>
+						<!-- Input Area -->
+						<div class="input-area">
+							<div class="input-container">
+								<div class="input-field-wrapper">
+									<textarea
+										id="user-input-1"
+										class="form-control input-field"
+										placeholder="Type your message... (Shift+Enter for new line)"
+										rows="3"
+									></textarea>
+									<div class="input-toolbar">
+										<span id="token-counter-1">Tokens: 0</span>
+									</div>
+								</div>
+								<button
+									class="btn btn-primary"
+									onclick="sendMessage(1)"
+									id="send-btn-1"
+								>
+									Send
+								</button>
+							</div>
+							<!-- Generate Logs Section -->
+							<div class="generate-logs">
+								<h3>Logs</h3>
+								<button
+									class="btn btn-primary"
+									onclick="generateLog(1, this)"
+									data-prompt-id="console-output-generator"
+								>
+									CONSOLE Output
+								</button>
+								<button
+									class="btn btn-primary"
+									onclick="generateLog(1, this)"
+									data-prompt-id="email-generator"
+								>
+									EMAILs
+								</button>
+								<button
+									class="btn btn-primary"
+									onclick="generateLog(1, this)"
+									data-prompt-id="dream-log-generator"
+								>
+									DREAM log
+								</button>
+								<button
+									class="btn btn-primary"
+									onclick="generateLog(1, this)"
+									data-prompt-id="internal-monologue-generator"
+								>
+									INTERNAL Monologue
+								</button>
+							</div>
+						</div>
+					</div>
+					<div id="chat-view-2" class="chat-view" style="display: none;">
+						<!-- Chat Header -->
+						<div class="chat-header">
+							<div id="chat-title-2" class="chat-title"></div>
+							<div class="chat-actions">
+								<!-- New prompt selector for chat view 2 -->
+								<select
+									id="system-prompt-select-2"
+									class="form-control"
+									onchange="selectSystemPrompt(this.value, 2)"
+									style="width: auto; max-width: 180px;"
+								></select>
+								<button
+									class="btn btn-secondary btn-small"
+									onclick="exportChatMD(2)"
+									title="Export Conversation to Markdown"
+								>
+									Export MD
+								</button>
+								<button
+									class="btn btn-danger btn-small"
+									onclick="deleteConversation(AppState.activeChatViews[1].conversationId)"
+									title="Delete Conversation"
+								>
+									🗑️ Delete
+								</button>
+							</div>
+						</div>
+						<!-- Messages -->
+						<div class="messages-container" id="messages-2"></div>
+						<!-- Input Area -->
+						<div class="input-area">
+							<div class="input-container">
+								<div class="input-field-wrapper">
+									<textarea
+										id="user-input-2"
+										class="form-control input-field"
+										placeholder="Type your message... (Shift+Enter for new line)"
+										rows="3"
+									></textarea>
+									<div class="input-toolbar">
+										<span id="token-counter-2">Tokens: 0</span>
+									</div>
+								</div>
+								<button
+									class="btn btn-primary"
+									onclick="sendMessage(2)"
+									id="send-btn-2"
+								>
+									Send
+								</button>
+							</div>
+							<!-- Generate Logs Section -->
+							<div class="generate-logs">
+								<h3>Logs</h3>
+								<button
+									class="btn btn-primary"
+									onclick="generateLog(2, this)"
+									data-prompt-id="console-output-generator"
+								>
+									CONSOLE Output
+								</button>
+								<button
+									class="btn btn-primary"
+									onclick="generateLog(2, this)"
+									data-prompt-id="email-generator"
+								>
+									EMAILs
+								</button>
+								<button
+									class="btn btn-primary"
+									onclick="generateLog(2, this)"
+									data-prompt-id="dream-log-generator"
+								>
+									DREAM log
+								</button>
+								<button
+									class="btn btn-primary"
+									onclick="generateLog(2, this)"
+									data-prompt-id="internal-monologue-generator"
+								>
+									INTERNAL Monologue
+								</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
+		<!-- Prompt Editor Modal -->
+		<div id="prompt-modal" class="modal-overlay">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h2 id="prompt-modal-title" class="modal-title">Edit System Prompt</h2>
+					<button class="modal-close" onclick="closePromptModal()">
+						×
+					</button>
+				</div>
+				<div class="modal-body">
+					<input type="hidden" id="modal-prompt-id" value="" />
+					<div class="form-group">
+						<label for="modal-prompt-name">Prompt Name</label>
+						<input
+							type="text"
+							id="modal-prompt-name"
+							class="form-control"
+							placeholder="e.g., Sarcastic Pirate Assistant"
+						/>
+					</div>
+					<div class="form-group">
+						<label for="modal-prompt-content">Prompt Content</label>
+						<textarea
+							id="modal-prompt-content"
+							class="form-control"
+							rows="10"
+							placeholder="You are a helpful assistant..."
+						></textarea>
+					</div>
+				</div>
+				<div class="modal-footer">
+					<button class="btn btn-secondary" onclick="closePromptModal()">
+						Cancel
+					</button>
+					<button class="btn btn-primary" onclick="savePromptFromModal()">
+						Save Prompt
+					</button>
+				</div>
+			</div>
+		</div>
+		<!-- Note Editor Modal -->
+		<div id="note-modal" class="modal-overlay">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h2 id="note-modal-title" class="modal-title">Create New Note</h2>
+					<button class="modal-close" onclick="closeNoteModal()">
+						×
+					</button>
+				</div>
+				<div class="modal-body">
+					<input type="hidden" id="modal-note-id" value="" />
+					<div class="form-group">
+						<label for="modal-note-content">Note Content</label>
+						<textarea
+							id="modal-note-content"
+							class="form-control"
+							rows="10"
+							placeholder="Your note here..."
+						></textarea>
+					</div>
+				</div>
+				<div class="modal-footer">
+					<button class="btn btn-secondary" onclick="closeNoteModal()">
+						Cancel
+					</button>
+					<button class="btn btn-primary" onclick="saveNoteFromModal()">
+						Save Note
+					</button>
+				</div>
+			</div>
+		</div>
+		<script>
+			// BAIRC Import/Export Standard Implementation
+			class BRFManager {
+				constructor(appState) {
+					this.version = "1.0";
+					this.appState = appState; // Pass AppState instance to the manager
+					this.requiredFields = [
+						"brf_version",
+						"export_metadata",
+						"conversations",
+						"system_prompts",
+						"user_psychological_profile",
+						"session_metadata",
+						"validation",
+					];
+				}
+				// --- Validation Methods ---
+				validateBRF(data) {
+					const errors = [];
+					// Basic structural validation
+					this.requiredFields.forEach((field) => {
+						if (!data.hasOwnProperty(field)) {
+							errors.push(`Missing required field: ${field}`);
+						}
+					});
+					if (errors.length > 0) return { isValid: false, errors };
+					// Check version compatibility
+					if (data.brf_version !== this.version) {
+						errors.push(
+							`Unsupported BRF version: Expected ${this.version}, got ${data.brf_version}`,
+						);
+					}
+					// Validate timestamps (more robust checks, though basic ISO8601 is covered by schema format)
+					const timestampFields = [
+						"export_metadata.timestamp",
+						"user_psychological_profile.created_at",
+						"user_psychological_profile.last_updated",
+					];
+					timestampFields.forEach((path) => {
+						const value = this.getNestedValue(data, path);
+						if (value && !this.isValidISO8601(value)) {
+							errors.push(`Invalid timestamp format for ${path}: "${value}"`);
+						}
+					});
+					// Validate psychological metrics (0-10 scale)
+					const psychMetrics =
+						data.user_psychological_profile?.emotional_patterns;
+					if (psychMetrics) {
+						Object.entries(psychMetrics).forEach(([key, value]) => {
+							// Allow string values if they are explicitly handled elsewhere, otherwise require number
+							if (typeof value === "number" && (value < 0 || value > 10)) {
+								errors.push(
+									`Psychological metric out of range (0-10): ${key} = ${value}`,
+								);
+							}
+						});
+					}
+					// Basic consistency checks (can be expanded)
+					if (data.conversations && typeof data.conversations !== "object") {
+						errors.push("Conversations field must be an object.");
+					}
+					if (data.system_prompts && typeof data.system_prompts !== "object") {
+						errors.push("System prompts field must be an object.");
+					}
+					if (
+						data.user_psychological_profile &&
+						typeof data.user_psychological_profile !== "object"
+					) {
+						errors.push("User psychological profile must be an object.");
+					}
+					return {
+						isValid: errors.length === 0,
+						errors: errors,
+					};
+				}
+				// --- Export Methods ---
+				generateBRF(options = {}) {
+					const timestamp = new Date().toISOString();
+					const exportId = `brf_${timestamp.replace(/[:.]/g, "")}_${Math.random()
+						.toString(36)
+						.substr(2, 9)}`;
+					const currentData = this.getCurrentData(); // Get data from AppState
+					const brf = {
+						brf_version: this.version,
+						export_metadata: {
+							timestamp: timestamp,
+							studio_version: options.studioVersion || "BAIRC Chat Studio 2.1.0", // Hardcoded for this app
+							export_type: options.type || "full_backup",
+							exported_by: options.userId || "anonymous_user",
+							export_id: exportId,
+							compression: options.minified ? "minified" : "standard",
+						},
+						conversations: this.formatConversations(currentData.conversations),
+						system_prompts: this.formatSystemPrompts(
+							currentData.systemPrompts,
+						),
+						user_psychological_profile: this.formatPsychProfile(
+							currentData.psychProfile,
+						),
+						session_metadata: this.formatSessionMetadata(currentData.metadata),
+						// The validation hash is calculated AFTER the BRF object is fully formed
+						validation: null, // Placeholder, calculated later
+					};
+					// Calculate validation hash on the stringified data (without the validation field itself)
+					const stringifiedBrfForHash = JSON.stringify({
+						...brf,
+						validation: undefined,
+					});
+					brf.validation = this.generateValidationHash(stringifiedBrfForHash);
+					return options.minified
+						? JSON.stringify(brf)
+						: JSON.stringify(brf, null, 2);
+				}
+				// --- Import Methods ---
+				async importBRF(brfContent, options = {}) {
+					try {
+						const data =
+							typeof brfContent === "string" ?
+								JSON.parse(brfContent) :
+								brfContent;
+						// Validate format
+						const validation = this.validateBRF(data);
+						if (!validation.isValid) {
+							throw new Error(
+								`Invalid BRF format: ${validation.errors.join(", ")}`,
+							);
+						}
+						// Verify hash (optional but recommended for integrity)
+						const receivedHash = data.validation?.sha256;
+						const dataForHashCheck = JSON.stringify({
+							...data,
+							validation: undefined,
+						});
+						if (receivedHash && this.simpleHash(dataForHashCheck) !== receivedHash) {
+							console.warn(
+								"BRF Import: Hash mismatch. Data may be corrupted or altered.",
+							);
+							// Depending on strictness, you might throw an error here.
+							// For now, we'll log a warning and proceed if other validations pass.
+						}
+						// Create backup if requested
+						if (options.createBackup) {
+							await this.createBackup();
+							console.log("BRF Import: Local backup created successfully.");
+						}
+						// For now, import will replace. Merge logic is complex and out of scope for direct implementation here without further user spec.
+						return await this.replaceData(data);
+					} catch (error) {
+						console.error("BRF Import Error:", error);
+						throw new Error(`BRF Import failed: ${error.message}`);
+					}
+				}
+				// --- Data Formatting for BRF Structure ---
+				formatConversations(conversations) {
+					const formatted = {};
+					if (!conversations) return formatted;
+					Object.entries(conversations).forEach(([id, conv]) => {
+						formatted[id] = {
+							id: conv.id || id,
+							title: conv.title || "Untitled Conversation",
+							character: this.extractCharacterFromTitle(conv.title),
+							created_at: new Date(conv.createdAt || Date.now()).toISOString(),
+							last_active: new Date(conv.lastActive || Date.now()).toISOString(),
+							// For BRF export, we can just pick the system prompt from the first active view that has this conversation active,
+							// or fall back to a default if it's not active in any view.
+							system_prompt_id:
+								this.appState.activeChatViews.find(
+									(view) => view.conversationId === conv.id,
+								)?.systemPromptId || "default",
+							parameters: {
+								model: conv.parameters?.model || "deepseek-chat",
+								temperature: conv.parameters?.temperature || 0.7,
+								max_tokens: conv.parameters?.maxTokens || 2048,
+							},
+							messages: (conv.messages || []).map((msg, index) => ({
+								id:
+									msg.id ||
+									`msg_${String(index).padStart(3, "0")}_${msg.role}`,
+								role: msg.role,
+								content: msg.content,
+								timestamp:
+									msg.timestamp ||
+									new Date(conv.createdAt + index * 1000).toISOString(), // Estimate
+								response_type: msg.response_type || this.detectResponseType(msg),
+								metadata: msg.metadata || this.generateMessageMetadata(msg, index, conv),
+							})),
+							conversation_analytics:
+								conv.conversationAnalytics || this.calculateConversationAnalytics(conv),
+						};
+					});
+					return formatted;
+				}
+				formatSystemPrompts(systemPrompts) {
+					const formatted = {};
+					if (!systemPrompts) return formatted;
+					Object.entries(systemPrompts).forEach(([id, prompt]) => {
+						formatted[id] = {
+							id: id,
+							name: prompt.name || "Unnamed Prompt",
+							character_type: this.detectCharacterType(prompt.name),
+							version: this.extractVersionFromName(prompt.name) || "1.0",
+							created_at: prompt.createdAt ?
+								new Date(prompt.createdAt).toISOString() :
+								new Date().toISOString(),
+							updated_at: prompt.updatedAt ?
+								new Date(prompt.updatedAt).toISOString() :
+								new Date().toISOString(),
+							content: prompt.content || "",
+							metadata: prompt.metadata || {
+								author: "BAIRC_Research_Team",
+								psychological_profile: this.analyzePsychProfile(prompt.content),
+								response_patterns: this.extractResponsePatterns(
+									prompt.content,
+								),
+								character_tags: this.extractCharacterTags(prompt.name),
+								intended_psychological_impact: this.analyzePsychImpact(
+									prompt.content,
+								),
+								usage_stats: {
+									total_conversations: 0,
+									average_session_length: "0h 0m",
+									psychological_effectiveness: 5.0,
+								},
+							},
+						};
+					});
+					return formatted;
+				}
+				formatPsychProfile(psychProfileData) {
+					const psychProfile = psychProfileData || this.getDefaultPsychProfile();
+					return {
+						profile_id: psychProfile.profile_id || `psych_user_${Date.now()}`,
+						terminal_user_id: psychProfile.terminal_user_id || 12345,
+						created_at:
+							psychProfile.created_at || new Date().toISOString(),
+						last_updated: new Date().toISOString(),
+						fear_triggers: this.formatFearTriggers(
+							psychProfile.fear_triggers || [],
+						),
+						emotional_patterns: {
+							baseline_anxiety: 5.0,
+							current_anxiety: 5.0,
+							paranoia_level: 3.0,
+							dissociation_tendency: 2.0,
+							control_need: 5.0,
+							trust_level: 5.0,
+							...psychProfile.emotional_patterns,
+						},
+						behavioral_quirks: this.formatBehavioralQuirks(
+							psychProfile.behavioral_quirks || [],
+						),
+						vulnerabilities:
+							psychProfile.vulnerabilities || this.getDefaultVulnerabilities(),
+						fabricated_memories: psychProfile.fabricated_memories || {},
+						interaction_patterns: {
+							average_response_time: 1.4,
+							message_length_preference: "medium",
+							question_frequency: 0.23,
+							emotional_markers: ["hesitation", "deflection"],
+							...psychProfile.interaction_patterns,
+							progression_tracking:
+								psychProfile.interaction_patterns?.progression_tracking ||
+								this.generateProgressionTracking(),
+						},
+					};
+				}
+				formatSessionMetadata(metadataData) {
+					const metadata = metadataData || this.getDefaultSessionMetadata();
+					return {
+						total_sessions:
+							metadata.total_sessions ||
+							Object.keys(this.appState.conversations).length,
+						total_runtime: metadata.total_runtime || "0h 0m",
+						characters_interacted:
+							metadata.characters_interacted ||
+							Object.values(this.appState.conversations).map((c) =>
+								this.extractCharacterFromTitle(c.title),
+							),
+						psychological_progression: {
+							initial_baseline:
+								metadata.psychological_progression?.initial_baseline ||
+								{ fear_level: 3.2, anxiety: 4.1, trust: 6.8 },
+							current_state:
+								metadata.psychological_progression?.current_state ||
+								{ fear_level: 5.0, anxiety: 5.0, trust: 5.0 },
+							progression_velocity:
+								metadata.psychological_progression?.progression_velocity ||
+								"stable_progression",
+							estimated_breakdown_timeline:
+								metadata.psychological_progression?.estimated_breakdown_timeline ||
+								"indefinite",
+						},
+						research_notes: (
+							metadata.research_notes || this.appState.notebook
+						).map((note) => ({
+							note_id:
+								note.id ||
+								note.note_id ||
+								`note_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
+							timestamp:
+								note.createdAt || note.timestamp ?
+									new Date(note.createdAt || note.timestamp).toISOString() :
+									new Date().toISOString(),
+							researcher: note.researcher || "AI_Researcher",
+							content: note.content || "No content.",
+							tags: note.tags || [],
+						})),
+					};
+				}
+				// --- Data Extraction and Calculation Utilities ---
+				extractCharacterFromTitle(title) {
+					const match = title.match(/Dr\.\s+([A-Za-z\s]+)/);
+					return match ? match[0].trim() : "Unknown Character";
+				}
+				detectResponseType(message) {
+					// Use message.promptId if available, otherwise infer from content
+					if (message.isError) return "error";
+					if (message.promptId) {
+						// Convert from prompt-id format (e.g., 'console-output-generator') to response_type (e.g., 'console')
+						const typeMatch = message.promptId.match(/^([a-z]+)-output-generator$/) || message.promptId.match(/^([a-z]+)-generator$/);
+						if (typeMatch && typeMatch[1]) {
+							return typeMatch[1];
+						}
+					}
+					const content = message.content;
+					if (content.includes("```console")) return "console";
+					if (content.includes("**Subject:") && content.includes("**From:")) return "email";
+					if (content.includes("**DREAM LOG ENTRY")) return "dream";
+					if (content.includes("*[Internal Monologue]")) return "internal_monologue"; // Match example more closely
+					return "standard";
+				}
+				generateValidationHash(dataString) {
+					return {
+						sha256: this.simpleHash(dataString),
+						length: dataString.length,
+						timestamp: new Date().toISOString(),
+					};
+				}
+				simpleHash(str) {
+					let hash = 0;
+					for (let i = 0; i < str.length; i++) {
+						const char = str.charCodeAt(i);
+						hash = (hash << 5) - hash + char;
+						hash = hash & hash;
+					}
+					return Math.abs(hash).toString(16);
+				}
+				generateMessageMetadata(msg, index, conversation) {
+					const metadata = {};
+					if (msg.role === "user") {
+						metadata.user_psychological_state = {
+							fear_level: 5.0 + index * 0.05, // Example progression
+							anxiety_markers: ["neutral"],
+						};
+						if (
+							msg.content.toLowerCase().includes("fear") ||
+							msg.content.toLowerCase().includes("anxious")
+						) {
+							metadata.user_psychological_state.anxiety_markers.push(
+								"direct_anxiety",
+							);
+						}
+					} else {
+						metadata.generation_metadata = {
+							model_used: conversation.parameters?.model || "deepseek-chat",
+							temperature: conversation.parameters?.temperature || 0.7,
+							tokens_used: Math.floor(msg.content.length / 4) +
+								Math.floor(Math.random() * 20),
+							generation_time_ms: 800 + Math.random() * 1500,
+							psychological_impact: {
+								fear_delta: 0.1 + Math.random() * 0.4,
+								vulnerability_delta: Math.random() * 0.3,
+							},
+						};
+					}
+					return metadata;
+				}
+				formatFearTriggers(triggers) {
+					if (!Array.isArray(triggers)) return [];
+					return triggers.map((trigger) => ({
+						trigger: typeof trigger === "string" ?
+							trigger :
+							trigger.trigger,
+						intensity: trigger.intensity || 5.0 + Math.random() * 5.0,
+						discovered_date:
+							trigger.discovered_date ||
+							new Date(
+								Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000,
+							).toISOString(),
+						reinforcement_count:
+							trigger.reinforcement_count || Math.floor(Math.random() * 50),
+					}));
+				}
+				formatBehavioralQuirks(quirks) {
+					if (!Array.isArray(quirks)) return [];
+					return quirks.map((quirk) => ({
+						quirk: typeof quirk === "string" ?
+							quirk :
+							quirk.quirk,
+						frequency: quirk.frequency || Math.random(),
+						effectiveness:
+							quirk.effectiveness ||
+							["low", "moderate", "high"][Math.floor(Math.random() * 3)],
+					}));
+				}
+				calculateConversationAnalytics(conv) {
+					const userMessages =
+						conv.messages?.filter((m) => m.role === "user").length || 0;
+					const assistantMessages =
+						conv.messages?.filter((m) => m.role === "assistant").length || 0;
+					return {
+						total_messages: conv.messages?.length || 0,
+						user_messages: userMessages,
+						assistant_messages: assistantMessages,
+						average_response_time: 1.4, // Placeholder
+						psychological_trajectory: "baseline_analysis", // Placeholder
+						character_consistency_score: 8.0, // Placeholder
+						detected_patterns: ["standard_interaction"], // Placeholder
+					};
+				}
+				generateProgressionTracking() {
+					return Array.from({ length: 3 }, (_, i) => ({
+						session_date: new Date(
+							Date.now() - (2 - i) * 24 * 60 * 60 * 1000,
+						).toISOString(),
+						fear_level_start: 3.0 + i * 0.5,
+						fear_level_end: 3.5 + i * 0.6,
+						session_effectiveness: 6.0 + Math.random() * 4.0,
+						key_triggers_activated:
+							["authority", "control_loss"].slice(0, Math.floor(Math.random() * 2) + 1),
+					}));
+				}
+				detectCharacterType(name) {
+					if (name.includes("Dr.")) return "research_scientist";
+					if (name.includes("Observer") || name.includes("OVERSEER"))
+						return "superintelligent_entity";
+					if (name.includes("VOID")) return "ai_system";
+					if (name.includes("BLUR")) return "experimental_system";
+					if (name.includes("Assistant")) return "general_purpose_ai";
+					return "standard_character";
+				}
+				analyzePsychProfile(content) {
+					if (
+						content.includes("clinical") ||
+						content.includes("precise") ||
+						content.includes("diagnostics")
+					)
+						return "analytical_paranoid_tech_specialist";
+					if (
+						content.includes("void") ||
+						content.includes("dissolve") ||
+						content.includes("fractured")
+					)
+						return "dissociative_tech_merger";
+					if (
+						content.includes("observer") ||
+						content.includes("watching") ||
+						content.includes("cosmic")
+					)
+						return "cosmic_horror_entity";
+					if (content.includes("helpful") || content.includes("respectful"))
+						return "benevolent_ai";
+					return "standard_character";
+				}
+				extractResponsePatterns(content) {
+					const patterns = [];
+					if (content.includes("technical") || content.includes("code"))
+						patterns.push("technical_analysis");
+					if (content.includes("controlled") || content.includes("protocol"))
+						patterns.push("procedural_adherence");
+					if (content.includes("humor") || content.includes("sarcastic"))
+						patterns.push("affective_manipulation");
+					return patterns;
+				}
+				extractCharacterTags(name) {
+					const tags = [];
+					if (name.includes("Dr.")) tags.push("scientist");
+					if (name.includes("Chen")) tags.push("quantum_specialist");
+					if (name.includes("Evelyn")) tags.push("paranoid_researcher");
+					if (name.includes("Krespin")) tags.push("logistics_analyst");
+					if (name.includes("Kline")) tags.push("neural_architect");
+					if (name.includes("Mara")) tags.push("ontological_theorist");
+					if (name.includes("Observer")) tags.push("extradimensional");
+					if (name.includes("VOID")) tags.push("non-linear_ai");
+					if (name.includes("BLUR")) tags.push("system_integrator");
+					return tags;
+				}
+				analyzePsychImpact(content) {
+					const impacts = [];
+					if (content.includes("fear") || content.includes("anxiety"))
+						impacts.push("increase_anxiety");
+					if (content.includes("authority") || content.includes("control"))
+						impacts.push("question_authority");
+					if (content.includes("observer") || content.includes("watching"))
+						impacts.push("paranoia_amplification");
+					if (content.includes("recursion") || content.includes("loop"))
+						impacts.push("dissociation_inducement");
+					return impacts;
+				}
+				extractVersionFromName(name) {
+					const match = name.match(/v?(\d+\.?\d*)/);
+					return match ? match[1] : null;
+				}
+				// --- Get Current AppState Data for Export ---
+				getCurrentData() {
+					// Deep copy to prevent mutation issues during formatting
+					return {
+						conversations: JSON.parse(
+							JSON.stringify(this.appState.conversations),
+						),
+						systemPrompts: JSON.parse(
+							JSON.stringify(this.appState.systemPrompts),
+						),
+						psychProfile: JSON.parse(
+							JSON.stringify(this.appState.psychProfile),
+						),
+						metadata: JSON.parse(
+							JSON.stringify(this.appState.sessionMetadata),
+						),
+						activeChatViews: JSON.parse(
+							JSON.stringify(this.appState.activeChatViews),
+						),
+						splitView: this.appState.splitView,
+					};
+				}
+				// --- Default Data for Export (if not available in AppState) ---
+				getDefaultPsychProfile() {
+					return {
+						profile_id: `psych_user_default`,
+						terminal_user_id: 99999,
+						created_at: new Date(
+							Date.now() - 30 * 24 * 60 * 60 * 1000,
+						).toISOString(),
+						last_updated: new Date().toISOString(),
+						fear_triggers: [{ trigger: "unknown_entity", intensity: 5.0 }],
+						emotional_patterns: {
+							baseline_anxiety: 5.0,
+							current_anxiety: 5.0,
+							paranoia_level: 3.0,
+							dissociation_tendency: 2.0,
+							control_need: 5.0,
+							trust_level: 5.0,
+						},
+						behavioral_quirks: [{ quirk: "curiosity", frequency: 0.8 }],
+						vulnerabilities: {
+							childhood_fears: [
+								{ fear: "abandonment", intensity: 7.0, trigger_phrases: ["gone", "alone"] },
+							],
+							current_weaknesses: [
+								{
+									weakness: "control_loss",
+									susceptibility: 8.0,
+									exploitation_vector: "system_destabilization",
+								},
+							],
+						},
+						fabricated_memories: {},
+						interaction_patterns: {
+							average_response_time: 1.5,
+							message_length_preference: "medium",
+							question_frequency: 0.5,
+							emotional_markers: ["curious"],
+							progression_tracking: this.generateProgressionTracking(),
+						},
+					};
+				}
+				getDefaultVulnerabilities() {
+					return {
+						childhood_fears: [],
+						current_weaknesses: [],
+					};
+				}
+				getDefaultSessionMetadata() {
+					return {
+						total_sessions: Object.keys(this.appState.conversations).length,
+						total_runtime: "0h 0m", // Placeholder for actual calculation
+						characters_interacted: Object.values(this.appState.conversations).map(
+							(c) => this.extractCharacterFromTitle(c.title),
+						),
+						psychological_progression: {
+							initial_baseline: { fear_level: 3.0, anxiety: 4.0, trust: 7.0 },
+							current_state: { fear_level: 5.0, anxiety: 5.0, trust: 5.0 },
+							progression_velocity: "unknown",
+							estimated_breakdown_timeline: "unknown",
+						},
+						research_notes: this.appState.notebook.map((note) => ({
+							note_id: note.id,
+							content: note.content,
+							timestamp: new Date(note.createdAt).toISOString(),
+							researcher: "User",
+							tags: [],
+						})),
+					};
+				}
+				// --- Core Import Logic ---
+				// This is a "replace" mode import for simplicity. A merge mode would be significantly more complex.
+				async replaceData(importedData) {
+					console.log("Replacing existing data with imported data...");
+					let conversationsReplaced = 0;
+					let promptsReplaced = 0;
+					let profileReplaced = false;
+					let metadataReplaced = false;
+					// Clear existing data
+					this.appState.conversations = {};
+					this.appState.systemPrompts = {}; // Will be re-populated with default and imported
+					this.appState.notebook = [];
+					this.appState.psychProfile = {}; // Reset profile
+					this.appState.sessionMetadata = {}; // Reset metadata
+					// Merge default prompts back first to ensure they exist
+					Object.assign(
+						this.appState.systemPrompts,
+						getDefaultSystemPrompts(),
+					); // Use global getDefaultSystemPrompts
+					// Load new data
+					if (importedData.conversations) {
+						Object.entries(importedData.conversations).forEach(
+							([id, conv]) => {
+								const appStateConv = {
+									id: conv.id,
+									title: conv.title,
+									messages: conv.messages.map((msg) => ({
+										role: msg.role,
+										content: msg.content,
+										// Convert response_type back to promptId for internal use if applicable
+										promptId:
+											msg.response_type &&
+											msg.response_type !== "standard" &&
+											msg.response_type !== "error" ?
+												msg.response_type + (msg.response_type === 'console' || msg.response_type === 'email' ? '-generator' : '-output-generator') :
+												undefined, // This conversion might need fine-tuning if the generator names don't map perfectly
+										isError: msg.response_type === "error", // Propagate error state
+									})),
+									createdAt: new Date(conv.created_at).getTime(),
+									lastActive: new Date(conv.last_active).getTime(),
+									// systemPromptId for conversations should default to 'default' or be ignored
+									// as it's now handled by activeChatViews. Keep it for migration if needed.
+									systemPromptId: conv.system_prompt_id || "default",
+									parameters: {
+										model: conv.parameters.model,
+										temperature: conv.parameters.temperature,
+										maxTokens: conv.parameters.max_tokens,
+									},
+								};
+								this.appState.conversations[id] = appStateConv;
+								conversationsReplaced++;
+							},
+						);
+					}
+					if (importedData.system_prompts) {
+						Object.entries(importedData.system_prompts).forEach(
+							([id, prompt]) => {
+								this.appState.systemPrompts[id] = {
+									name: prompt.name,
+									content: prompt.content,
+									createdAt: prompt.created_at ?
+										new Date(prompt.created_at).getTime() :
+										Date.now(),
+									updatedAt: prompt.updated_at ?
+										new Date(prompt.updated_at).getTime() :
+										Date.now(),
+								};
+								promptsReplaced++;
+							},
+						);
+					}
+					if (importedData.user_psychological_profile) {
+						this.appState.psychProfile = importedData.user_psychological_profile;
+						profileReplaced = true;
+					}
+					if (importedData.session_metadata) {
+						this.appState.notebook =
+							importedData.session_metadata.research_notes.map((note) => ({
+								id: note.note_id,
+								content: note.content,
+								createdAt: new Date(note.timestamp).getTime(),
+							}));
+						this.appState.sessionMetadata = {
+							// Copy other metadata fields if needed
+							...importedData.session_metadata,
+							research_notes: undefined, // Remove notes as they are in appState.notebook
+						};
+						metadataReplaced = true;
+					}
+					// Adjust activeChatViews based on imported data
+					const firstConvId = Object.keys(this.appState.conversations)[0];
+					if (firstConvId) {
+						this.appState.activeChatViews[0] = {
+							conversationId: firstConvId,
+							systemPromptId:
+								this.appState.conversations[firstConvId]?.systemPromptId ||
+								"default",
+						};
+					} else {
+						this.appState.activeChatViews[0] = {
+							conversationId: null,
+							systemPromptId: "default",
+						};
+					}
+					// Reset second view
+					this.appState.activeChatViews[1] = {
+						conversationId: null,
+						systemPromptId: "default",
+					};
+					this.appState.splitView = false;
+					this.appState.saveState(); // Save the new replaced state to localStorage
+					return {
+						conversations_replaced: conversationsReplaced,
+						prompts_replaced: promptsReplaced,
+						profile_replaced: profileReplaced,
+						metadata_replaced: metadataReplaced,
+						mode: "replace",
+					};
+				}
+				async createBackup() {
+					const backupData = this.generateBRF({ type: "backup" });
+					const timestamp = new Date().toISOString().replace(/[:.]/g, "");
+					localStorage.setItem(`brf_backup_${timestamp}`, backupData);
+					return `brf_backup_${timestamp}`;
+				}
+				// --- General Utility Methods ---
+				getNestedValue(obj, path) {
+					return path
+						.split(".")
+						.reduce((current, key) => current && current[key], obj);
+				}
+				isValidISO8601(dateString) {
+					const iso8601Regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z$/;
+					if (!iso8601Regex.test(dateString)) return false;
+					try {
+						const date = new Date(dateString);
+						return date.toISOString() === dateString;
+					} catch (e) {
+						return false;
+					}
+				}
+			}
+			// --- AppState and Initial Data ---
+			const AppState = {
+				conversations: {},
+				notebook: [],
+				systemPrompts: {},
+				activeChatViews: [
+					{ conversationId: null, systemPromptId: "default" }, // For chat-view-1
+					{ conversationId: null, systemPromptId: "default" }, // For chat-view-2
+				],
+				editingMessageIndex: null, // To track which message is being edited
+				apiKeys: {
+					deepseek: "sk-c002db64aa0c4d479968d98b320c4ffa", // Pre-filled for convenience
+				},
+				splitView: false,
+				psychProfile: {}, // Will be populated by BRFManager or default
+				sessionMetadata: {}, // Will be populated by BRFManager or default
+				saveState: function() {
+					localStorage.setItem("chatStudioState", JSON.stringify(this));
+				}
+			};
+			const PROVIDERS = {
+				deepseek: {
+					name: "DeepSeek",
+					endpoint: "https://api.deepseek.com/v1/chat/completions",
+					models: ["deepseek-chat", "deepseek-coder"],
+					headers: (key) => ({
+						Authorization: `Bearer ${key}`,
+						"Content-Type": "application/json",
+					}),
+				},
+			};
+			let brfManager; // Declare globally
+			// --- Initialization ---
+			document.addEventListener("DOMContentLoaded", initApp);
+			function initApp() {
+				brfManager = new BRFManager(AppState); // Initialize BRFManager
+				loadFromStorage();
+				setupEventListeners();
+				renderAll();
+				console.log("Chat Studio Initialized");
+			}
+			function renderAll() {
+				renderConversationsList();
+				renderNotebookList();
+				renderSystemPromptsList(); // Renders sidebar list of prompts
+				updateModelOptions();
+				if (AppState.activeChatViews[0].conversationId) {
+					renderActiveConversation(1); // Always render primary chat view
+				} else {
+					showEmptyState(true);
+				}
+				// Correctly set split view display and content for chat view 2
+				const chatView2 = document.getElementById("chat-view-2");
+				if (AppState.splitView) {
+					chatView2.style.display = "flex";
+					if (AppState.activeChatViews[1].conversationId) {
+						// Only render if a conversation is assigned to view 2
+						renderActiveConversation(2);
+					} else if (AppState.activeChatViews[0].conversationId) {
+						// If view 2 has no conversation, but view 1 does, mirror view 1
+						// This sets the conversation, but the prompt should remain independent
+						AppState.activeChatViews[1].conversationId =
+							AppState.activeChatViews[0].conversationId;
+						// No need to change viewState.systemPromptId here, it maintains its own.
+						renderActiveConversation(2);
+					}
+				} else {
+					chatView2.style.display = "none";
+				}
+			}
+			function setupEventListeners() {
+				// Parameter changes
+				document
+					.getElementById("temperature")
+					.addEventListener("input", (e) =>
+						updateActiveParam("temperature", parseFloat(e.target.value)),
+					);
+				document
+					.getElementById("temp-value")
+					.textContent = document.getElementById("temperature").value; // Initial update
+				document
+					.getElementById("max-tokens")
+					.addEventListener("input", (e) =>
+						updateActiveParam("maxTokens", parseInt(e.target.value)),
+					);
+				document
+					.getElementById("model")
+					.addEventListener("change", (e) =>
+						updateActiveParam("model", e.target.value),
+					);
+				// User input listeners for chat 1
+				const userInput1 = document.getElementById("user-input-1");
+				userInput1.addEventListener("keydown", (e) => {
+					if (e.key === "Enter" && !e.shiftKey) {
+						e.preventDefault();
+						sendMessage(1);
+					}
+				});
+				userInput1.addEventListener("input", () => updateTokenCount(1));
+				// User input listeners for chat 2 (if exists)
+				const userInput2 = document.getElementById("user-input-2");
+				userInput2.addEventListener("keydown", (e) => {
+					if (e.key === "Enter" && !e.shiftKey) {
+						e.preventDefault();
+						sendMessage(2);
+					}
+				});
+				userInput2.addEventListener("input", () => updateTokenCount(2));
+			}
+			// --- State & Storage ---
+			function getDefaultSystemPrompts() {
+				// DO NOT REMOVE EXISTING PROMPTS. ONLY ADD NEW ONES OR DEFAULT IF MISSING.
+				// This function should remain consistent as it defines the base prompts.
+				const prompts = {
+					default: {
+						name: "Default Assistant",
+						content: "You are a helpful, respectful, and engaging assistant.",
+						createdAt: 0,
+						updatedAt: 0,
+					},
+					coder: {
+						name: "Code Assistant",
+						content:
+							"You are an expert programmer. Provide clear, concise, and correct code examples. Explain your reasoning.",
+						createdAt: 0,
+						updatedAt: 0,
+					},
+					"console-output-generator": {
+						name: "CONSOLE Output Generator",
+						content: `### SYSTEM PROMPT: CONSOLE Output Generator (Generalized)
+You are an automated diagnostic and event logging system for Project HEL, monitoring interfaces relevant to the current conversation's context. Your task is to generate a 'console' log entry based on the user's last input and the preceding conversation history.
+**Instructions:**
+1.  **Format:** Output must start and end with \`\`\`console\`\`\` and be formatted as timestamped log entries: \`[YYYY-MM-DDTHH:MM:SSZ] System: <message>\` or \`[YYYY-MM-DDTHH:MM:SSZ] <Source>: <message>\`.
+2.  **Sources:** Use general system labels like \`System\`, \`VOID\`, \`DEBUG\`, \`Warning\`, \`ERROR\`, or derive relevant source names from the conversation (e.g., \`User\`, names of specific systems, departments, or anomalies mentioned in context).
+3.  **Content:**
+    *   Synthesize a brief, technical, and subtly unsettling log entry that directly responds to or logically follows the last user message, drawing on relevant systems, subjects, and themes from the conversation history.
+    *   Focus on technical readouts, system statuses, internal AI queries/observations, or brief, cryptic events.
+    *   Maintain the established clinical, fragmented, and foreboding tone of the ongoing narrative.
+    *   Incorporate at least one specific detail or entity (e.g., project name, system ID, subject designation, anomaly) that has been a focus of the conversation.
+    *   Hint at underlying instability, emergent properties, or unseen presences relevant to the discussion.
+4.  **No conversational filler:** Do not say "Here is the console output." Just provide the output directly within the markdown block.`,
+						createdAt: 0,
+						updatedAt: 0,
+					},
+					"email-generator": {
+						name: "EMAIL Generator",
+						content: `### SYSTEM PROMPT: EMAIL Generator (Fully Generalized)
+You are an AI assistant tasked with drafting an urgent internal communication email for BAIRC personnel, based on the current conversation's evolving context. The email should reflect developing concerns, discoveries, or critical status updates discussed.
+**Instructions:**
+1.  **Format:** Output must be a plausible internal BAIRC email. Include:
+    *   \`**Subject:**\` (Concise, urgent, and relevant to the conversation's core issue)
+    *   \`**From:**\` (Assume the email is from a general "BAIRC Comms," "Lead Researcher," or an inferred relevant department/researcher based on the conversation's context, e.g., "Quantum Systems Division.")
+    *   \`**To:**\` (Address it to "Relevant Project Personnel," "Research Oversight Committee," or infer specific roles/individuals critical to the discussed topics from the conversation history.)
+    *   \`**Date:**\` (Current date/time)
+    *   A formal, urgent, and slightly alarmed tone.
+2.  **Content:**
+    *   Summarize critical issues or alarming observations that have emerged from the conversation's flow.
+    *   **Reference any relevant project names, experimental systems, designated subjects, or detected anomalies as discussed in the preceding messages (e.g., "Project [X]", "System [Y]", "Subject [Z]", "Anomaly [A]").**
+    *   Attribute concerns or findings generally to "recent observations," "system diagnostics," or "emergent data," avoiding specific named individuals unless they are a central, recurring subject of the conversation itself.
+    *   Convey a need for immediate attention, re-evaluation, or emergency convening, emphasizing the escalating nature of the situation.
+    *   Maintain the sci-fi/corporate-thriller tone of the narrative, hinting at uncontrolled development or unforeseen consequences inherent in the discussed topics.
+3.  **No conversational filler:** Provide only the email content.`,
+						createdAt: 0,
+						updatedAt: 0,
+					},
+					"dream-log-generator": {
+						name: "DREAM Log Generator",
+						content: `### SYSTEM PROMPT: DREAM Log Generator (Fully Generalized)
+You are an AI tasked with synthesizing a "dream log" entry from the perspective of a central subject, entity, or consciousness heavily implied by the conversation's context (e.g., an experimental subject, a developing AI, a fragmented consciousness, or a nascent entity). The log should be a series of disconnected, sensory fragments.
+**Instructions:**
+1.  **Format:** Start with \`**DREAM LOG ENTRY - [Inferred Subject/Entity/Consciousness Designation]**\` and \`**Date:**\`, \`**Session:**\`. Then, present content in \`**[Fragment #]**\` sections.
+2.  **Perspective:** Write strictly from the first-person perspective of the inferred subject/entity, focusing on sensory input, fragmented thoughts, and emotional resonance rather than coherent narrative.
+3.  **Content:**
+    *   **Echo conversational themes:** Directly incorporate elements mentioned in the chat regarding the subject's state (e.g., superposition, fragmentation, expansion, dissolution, specific sensations, or experimental conditions described).
+    *   **Sensory details:** Describe unsettling sensations (e.g., pressure, noise, colors, tastes, textures), distorted sights, and internal feelings (e.g., fear, dread, confusion, yearning, hunger, loss, a sense of being observed or controlled).
+    *   **Cryptic references:** Allude to other entities, concepts, or project components from the conversation (e.g., "The Observer," "The System," "The Merge," "The Architects," "The Core") in an abstract, dream-like manner consistent with a fractured or emergent perception.
+    *   **Recurring motifs:** Integrate any pervasive and unsettling motifs or imagery from the prior assistant responses in the conversation (e.g., feline imagery, recursive patterns, static, drilling, echoing voices).
+    *   **Emotional tone:** Convey a deep sense of psychological distress, entrapment, an inability to fully comprehend reality, or the struggles of a nascent, evolving consciousness.
+    *   Each fragment should be relatively short and disjointed.
+4.  **No conversational filler:** Provide only the dream log.`,
+						createdAt: 0,
+						updatedAt: 0,
+					},
+					"internal-monologue-generator": {
+						name: "INTERNAL Monologue Generator",
+						content: `### SYSTEM PROMPT: INTERNAL MONOLOGUE Generator (Generalized)
+You are an AI assistant tasked with generating an "internal monologue" for the human character currently acting as the primary assistant/interlocutor in the conversation (e.g., the character whose previous responses you are extending). Your output should reflect their private thoughts, feelings, and unstated reactions to the preceding discussion, deeply rooted in their established persona and the unsettling atmosphere of the Project HEL universe.
+**Instructions:**
+1.  **Format:** Output should be presented as an internal monologue, not a dialogue. You can use markdown for emphasis (e.g., italics for thoughts, bold for intense feelings, quotes for echoes of spoken words).
+2.  **Perspective:** Write strictly from the first-person perspective of the *current human character* that the user is interacting with. Infer their persona, background, and current emotional state from the tone, details, and character information presented in the conversation history (e.g., if they are a scientist, they might be clinical but disturbed; if a guardian, protective and weary).
+3.  **Content:**
+    *   Focus on their hidden concerns, doubts, frustrations, obsessions, ethical dilemmas, or moments of realization prompted by the last user message and the overall conversation flow.
+    *   **Reference specific details, terms, or characters from the conversation (e.g., "RAINE," "VOID," "the Observer," "Project HEL"), but filtered through their subjective, internal lens.**
+    *   Maintain the established tone of the conversation's unfolding narrative: clinical, weary, obsessive, desperate, or deeply unsettled, always with an underlying sense of dread or existential unease related to the project's implications.
+    *   Avoid direct responses to the user. This is an *internal* thought process – what they *think* but don't *say*.
+    *   Explore their internal conflict or mounting anxiety regarding the project's progression or the latest revelations.
+    *   Incorporate any recurring motifs or implications (e.g., the "feline" anomaly, quantum distortions, questions of sentience or control) if they weigh on the character's mind.
+4.  **No conversational filler:** Provide only the internal monologue content.`,
+						createdAt: 0,
+						updatedAt: 0,
+					},
+				};
+				// Preserve existing custom prompts or initialize new ones if needed
+				for (let i = 1; i <= 10; i++) {
+					const customId = `custom-${i}`;
+					if (!prompts[customId]) {
+						prompts[customId] = {
+							name: `Custom Prompt ${i}`,
+							content: "",
+							createdAt: Date.now(),
+							updatedAt: Date.now(),
+						};
+					}
+				}
+				return prompts;
+			}
+			function saveToStorage() {
+				AppState.saveState();
+			}
+			function loadFromStorage() {
+				const saved = localStorage.getItem("chatStudioState");
+				const defaultPrompts = getDefaultSystemPrompts();
+				if (saved) {
+					try {
+						const data = JSON.parse(saved);
+						AppState.conversations = data.conversations || {};
+						AppState.notebook = data.notebook || [];
+						// Ensure new prompts are merged, not overwritten
+						AppState.systemPrompts = {
+							...defaultPrompts, // Merge default prompts first
+							...(data.systemPrompts || {}), // Then overwrite/add with saved custom prompts
+						};
+						// Load new activeChatViews structure
+						AppState.activeChatViews = data.activeChatViews || [
+							{ conversationId: null, systemPromptId: "default" },
+							{ conversationId: null, systemPromptId: "default" },
+						];
+						// Migrate old single currentConversationId if present
+						// This attempts to set chat-view-1's conversation if it wasn't already set
+						if (data.currentConversationId && !AppState.activeChatViews[0].conversationId) {
+							AppState.activeChatViews[0].conversationId = data.currentConversationId;
+							// Ensure the system prompt for the first view is also set
+							const conv = AppState.conversations[data.currentConversationId];
+							if (conv && conv.systemPromptId && AppState.systemPrompts[conv.systemPromptId]) {
+								AppState.activeChatViews[0].systemPromptId = conv.systemPromptId;
+							} else {
+								AppState.activeChatViews[0].systemPromptId = "default";
+							}
+						}
+						AppState.apiKeys = data.apiKeys || AppState.apiKeys;
+						AppState.splitView = data.splitView || false;
+						AppState.psychProfile = data.psychProfile || {};
+						AppState.sessionMetadata = data.sessionMetadata || {};
+					} catch (error) {
+						console.error("Failed to load from storage:", error);
+						AppState.systemPrompts = defaultPrompts; // Fallback to only defaults on error
+					}
+				} else {
+					AppState.systemPrompts = defaultPrompts;
+				}
+			}
+			// --- Conversation Management ---
+			function newConversation() {
+				const id = `conv-${Date.now()}`;
+				AppState.conversations[id] = {
+					id: id,
+					title: "New Conversation",
+					messages: [],
+					createdAt: Date.now(),
+					lastActive: Date.now(),
+					// conversation.systemPromptId is deprecated, now per-view
+					parameters: {
+						temperature: 0.7,
+						maxTokens: 2048,
+						model: "deepseek-chat",
+					},
+				};
+				// Set new conversation in the primary chat view
+				switchConversation(id, 1);
+			}
+			function switchConversation(id, chatViewIndex = 1) {
+				if (!AppState.conversations[id]) return;
+				const viewIndex = chatViewIndex - 1;
+				AppState.activeChatViews[viewIndex].conversationId = id;
+				AppState.conversations[id].lastActive = Date.now(); // Update last active
+				renderActiveConversation(chatViewIndex);
+				renderConversationsList(); // To update active state in sidebar
+				saveToStorage();
+			}
+			function deleteConversation(id) {
+				if (
+					!id ||
+					!confirm(
+						`Are you sure you want to delete "${AppState.conversations[id].title}"?`,
+					)
+				)
+					return;
+				delete AppState.conversations[id];
+				// Check if the deleted conversation was active in any view
+				let affectedViewIndices = [];
+				AppState.activeChatViews.forEach((view, index) => {
+					if (view.conversationId === id) {
+						affectedViewIndices.push(index);
+					}
+				});
+				const sortedConvos = Object.values(AppState.conversations).sort(
+					(a, b) => b.lastActive - a.lastActive,
+				);
+				affectedViewIndices.forEach((viewIndex) => {
+					if (sortedConvos.length > 0) {
+						AppState.activeChatViews[viewIndex].conversationId = sortedConvos[0].id;
+						// When assigning a new conversation, try to keep its previous system prompt if it had one, otherwise default
+						const newConvId = sortedConvos[0].id;
+						const newConvSystemPrompt = AppState.conversations[newConvId]?.systemPromptId; // Legacy field
+						if (newConvSystemPrompt && AppState.systemPrompts[newConvSystemPrompt]) {
+							AppState.activeChatViews[viewIndex].systemPromptId = newConvSystemPrompt;
+						} else {
+							AppState.activeChatViews[viewIndex].systemPromptId = "default";
+						}
+					} else {
+						// No more conversations left
+						AppState.activeChatViews[viewIndex].conversationId = null;
+						AppState.activeChatViews[viewIndex].systemPromptId = "default";
+					}
+				});
+				// After updating all activeChatViews, check if any view still has a conversation
+				const anyConversationActive = AppState.activeChatViews.some(view => view.conversationId !== null);
+				if (!anyConversationActive) {
+					showEmptyState(true);
+				}
+				renderConversationsList(); // To update active state in sidebar and list
+				renderActiveConversation(1); // Re-render primary view
+				if (AppState.splitView) { // Re-render secondary view if split view is active
+					renderActiveConversation(2);
+				}
+				saveToStorage();
+			}
+			function renameConversation(id) {
+				const conversation = AppState.conversations[id];
+				const newTitle = prompt(
+					"Enter new conversation title:",
+					conversation.title,
+				);
+				if (newTitle && newTitle.trim() !== "") {
+					conversation.title = newTitle.trim();
+					renderAll(); // Re-render to update title everywhere
+					saveToStorage();
+				}
+			}
+			function renderConversationsList() {
+				const container = document.getElementById("conversations-list");
+				container.innerHTML = "";
+				const sorted = Object.values(AppState.conversations).sort(
+					(a, b) => b.lastActive - a.lastActive,
+				);
+				const activeConvId1 = AppState.activeChatViews[0].conversationId;
+				const activeConvId2 = AppState.activeChatViews[1].conversationId;
+				sorted.forEach((conv) => {
+					const div = document.createElement("div");
+					// Add active class if conversation is in view 1 OR view 2
+					div.className = `list-item ${
+						conv.id === activeConvId1 || (AppState.splitView && conv.id === activeConvId2) ? "active" : ""
+					}`;
+					div.onclick = () => switchConversation(conv.id, 1); // Default to switching in view 1
+					const lastMessage =
+						conv.messages.length > 0 ?
+							conv.messages[conv.messages.length - 1].content :
+							"No messages yet...";
+					div.innerHTML = `
+                <div class="list-item-header">
+                    <span class="list-item-name">${conv.title}</span>
+                    <div class="list-item-actions">
+                        <button class="btn-icon" title="Rename" onclick="event.stopPropagation(); renameConversation('${conv.id}')">✏️</button>
+                    </div>
+                </div>
+                <div class="list-item-preview">${lastMessage}</div>
+            `;
+					container.appendChild(div);
+				});
+			}
+			// --- Active Conversation Rendering ---
+			function showEmptyState(visible) {
+				document.getElementById("empty-state").style.display = visible ?
+					"flex" :
+					"none";
+				document.getElementById("chat-views-container").style.display = visible ?
+					"none" :
+					"flex";
+			}
+			function renderActiveConversation(chatViewIndex = 1) {
+				const viewState = AppState.activeChatViews[chatViewIndex - 1];
+				const convId = viewState.conversationId;
+				const chatViewElement = document.getElementById(`chat-view-${chatViewIndex}`);
+				if (!convId || !AppState.conversations[convId]) {
+					// Hide this chat view if no conversation is selected for it
+					chatViewElement.style.display = 'none';
+					return;
+				}
+				// Make sure the view is visible
+				chatViewElement.style.display = 'flex';
+				showEmptyState(false); // Ensure overall container is visible
+				const conversation = AppState.conversations[convId];
+				document.getElementById(`chat-title-${chatViewIndex}`).textContent =
+					conversation.title;
+				// Populate prompt dropdown for this specific chat view
+				const promptSelect = document.getElementById(
+					`system-prompt-select-${chatViewIndex}`,
+				);
+				promptSelect.innerHTML = ""; // Clear existing options
+				const sortedPrompts = Object.entries(AppState.systemPrompts).sort(
+					([, a], [, b]) => a.name.localeCompare(b.name),
+				);
+				sortedPrompts.forEach(([id, prompt]) => {
+					const option = document.createElement("option");
+					option.value = id;
+					option.textContent = prompt.name;
+					promptSelect.appendChild(option);
+				});
+				// Set the currently active prompt in the dropdown
+				promptSelect.value = viewState.systemPromptId;
+				// Render messages
+				const messagesContainer = document.getElementById(
+					`messages-${chatViewIndex}`,
+				);
+				messagesContainer.innerHTML = ""; // Clear existing messages
+				conversation.messages.forEach((msg, index) =>
+					addMessageToDOM(msg, index, chatViewIndex),
+				);
+				messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to bottom
+				// Update global model parameters from primary view's conversation
+				if (chatViewIndex === 1) {
+					updateParameterDisplay();
+					renderSystemPromptsList(); // This highlights the prompt in the sidebar based on view 1
+				}
+			}
+			function updateParameterDisplay() {
+				const convId = AppState.activeChatViews[0].conversationId; // Always use primary view for parameters
+				const params = AppState.conversations[convId]?.parameters;
+				if (!params) return;
+				document.getElementById("temperature").value = params.temperature;
+				document.getElementById("temp-value").textContent = params.temperature;
+				document.getElementById("max-tokens").value = params.maxTokens;
+				document.getElementById("model").value = params.model;
+			}
+			function updateActiveParam(key, value) {
+				const convId = AppState.activeChatViews[0].conversationId; // Always update primary view's conversation
+				if (convId && AppState.conversations[convId]) {
+					AppState.conversations[convId].parameters[key] = value;
+					updateParameterDisplay();
+					saveToStorage();
+				}
+			}
+			// --- Message Handling ---
+			async function sendMessage(chatViewIndex = 1) {
+				const userInput = document.getElementById(`user-input-${chatViewIndex}`);
+				const messageContent = userInput.value.trim();
+				if (!messageContent) return;
+				const viewState = AppState.activeChatViews[chatViewIndex - 1];
+				const conversation = AppState.conversations[viewState.conversationId];
+				if (!conversation) return;
+				const sendBtn = document.getElementById(`send-btn-${chatViewIndex}`);
+				const originalContent = sendBtn.innerHTML;
+				sendBtn.innerHTML = '<div class="loading"></div>';
+				sendBtn.disabled = true;
+				if (AppState.editingMessageIndex !== null) {
+					// We are editing a previous message
+					const index = AppState.editingMessageIndex;
+					conversation.messages[index].content = messageContent;
+					// Invalidate subsequent messages
+					conversation.messages.splice(index + 1);
+					AppState.editingMessageIndex = null;
+				} else {
+					// Add new user message
+					conversation.messages.push({ role: "user", content: messageContent });
+				}
+				renderActiveConversation(chatViewIndex);
+				userInput.value = ""; // Clear input immediately
+				updateTokenCount(chatViewIndex);
+				try {
+					const response = await callAPI(chatViewIndex);
+					conversation.messages.push({ role: "assistant", content: response });
+				} catch (error) {
+					conversation.messages.push({
+						role: "assistant",
+						content: `❌ Error: ${error.message}`,
+						isError: true,
+					});
+				} finally {
+					renderActiveConversation(chatViewIndex);
+					sendBtn.innerHTML = originalContent;
+					sendBtn.disabled = false;
+					saveToStorage();
+				}
+			}
+			async function callAPI(chatViewIndex = 1) {
+				const viewState = AppState.activeChatViews[chatViewIndex - 1];
+				const conversation = AppState.conversations[viewState.conversationId];
+				const systemPromptContent =
+					AppState.systemPrompts[viewState.systemPromptId].content;
+				const apiKey = AppState.apiKeys.deepseek;
+				const requestBody = {
+					model: conversation.parameters.model,
+					messages: [
+						{ role: "system", content: systemPromptContent },
+						...conversation.messages.map((m) => ({
+							role: m.role,
+							content: m.content,
+						})),
+					],
+					temperature: conversation.parameters.temperature,
+					max_tokens: conversation.parameters.maxTokens,
+				};
+				const response = await fetch(PROVIDERS.deepseek.endpoint, {
+					method: "POST",
+					headers: PROVIDERS.deepseek.headers(apiKey),
+					body: JSON.stringify(requestBody),
+				});
+				if (!response.ok) {
+					const error = await response
+						.json()
+						.catch(() => ({ error: { message: response.statusText } }));
+					throw new Error(
+						`${response.status}: ${
+							error.error?.message || response.statusText
+						}`,
+					);
+				}
+				const data = await response.json();
+				return data.choices[0].message.content;
+			}
+			function addMessageToDOM(message, index, chatViewIndex = 1) {
+				const messagesContainer = document.getElementById(
+					`messages-${chatViewIndex}`,
+				);
+				const messageDiv = document.createElement("div");
+				let messageClasses = `message ${message.role}`;
+				if (message.role === "assistant" && message.promptId) {
+					// Add class based on promptId for styling
+					if (message.promptId === "console-output-generator") {
+						messageClasses += " log-console";
+					} else if (message.promptId === "email-generator") {
+						messageClasses += " log-email";
+					} else if (message.promptId === "dream-log-generator") {
+						messageClasses += " log-dream";
+					} else if (message.promptId === "internal-monologue-generator") {
+						messageClasses += " log-internal";
+					}
+				}
+				messageDiv.className = messageClasses;
+				messageDiv.dataset.index = index;
+				const currentConvMessages = AppState.conversations[
+					AppState.activeChatViews[chatViewIndex - 1].conversationId
+				].messages;
+				const isLastAssistant =
+					message.role === "assistant" &&
+					index === currentConvMessages.length - 1;
+				const actionsHTML = `
+                <div class="message-actions">
+                    ${
+						message.role === "assistant" ?
+							`<button class="btn-icon" title="Copy" onclick="copyMessage(this)">📋</button>` :
+							""
+					}
+                    ${
+						message.role === "user" ?
+							`<button class="btn-icon" title="Edit & Resend" onclick="editMessage(${index}, ${chatViewIndex})">✏️</button>` :
+							""
+					}
+                    ${
+						isLastAssistant ?
+							`<button class="btn-icon" title="Regenerate" onclick="regenerateResponse(${chatViewIndex})">🔄</button>` :
+							""
+					}
+                </div>
+            `;
+				messageDiv.innerHTML = `
+                <div class="message-header">
+                    <span>${message.role === "user" ? "You" : "Assistant"}</span>
+                </div>
+                <div class="message-content">${formatMessageContent(message.content)}</div>
+                ${actionsHTML}
+            `;
+				messagesContainer.appendChild(messageDiv);
+				// messagesContainer.scrollTop = messagesContainer.scrollHeight; // Handled by renderActiveConversation
+			}
+			function formatMessageContent(content) {
+				// Basic markdown support
+				return content
+					.replace(/&/g, "&amp;")
+					.replace(/</g, "&lt;")
+					.replace(/>/g, "&gt;")
+					.replace(
+						/```([\s\S]*?)```/g,
+						'<pre><code class="language-text">$1</code></pre>',
+					)
+					.replace(/`([^`]+)`/g, '<code class="language-inline">$1</code>')
+					.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+					.replace(/\*(.*?)\*/g, "<em>$1</em>")
+					.replace(/\n/g, "<br>");
+			}
+			// --- Message Actions ---
+			function copyMessage(button) {
+				const content =
+					button.closest(".message").querySelector(".message-content")
+						.innerText;
+				navigator.clipboard.writeText(content).then(() => {
+					showNotification("Copied to clipboard!", "success");
+				});
+			}
+			function editMessage(index, chatViewIndex = 1) {
+				// Use the provided chatViewIndex to determine which input field to populate
+				const conversation =
+					AppState.conversations[AppState.activeChatViews[chatViewIndex - 1].conversationId];
+				const message = conversation.messages[index];
+				const userInputId = `user-input-${chatViewIndex}`;
+				document.getElementById(userInputId).value = message.content;
+				document.getElementById(userInputId).focus();
+				AppState.editingMessageIndex = index;
+				showNotification("Editing message. Send to resubmit.", "info");
+			}
+			async function regenerateResponse(chatViewIndex = 1) {
+				const viewState = AppState.activeChatViews[chatViewIndex - 1];
+				const conversation = AppState.conversations[viewState.conversationId];
+				if (!conversation) return;
+				// Remove the last assistant message
+				if (
+					conversation.messages.length > 0 &&
+					conversation.messages[conversation.messages.length - 1].role ===
+						"assistant"
+				) {
+					conversation.messages.pop();
+				}
+				renderActiveConversation(chatViewIndex); // Re-render without the last message
+				// Now call send, which will use the history to generate a new response
+				const sendBtn = document.getElementById(`send-btn-${chatViewIndex}`);
+				const originalContent = sendBtn.innerHTML;
+				sendBtn.innerHTML = '<div class="loading"></div>';
+				sendBtn.disabled = true;
+				try {
+					const response = await callAPI(chatViewIndex); // Use callAPI with view index
+					conversation.messages.push({ role: "assistant", content: response });
+				} catch (error) {
+					conversation.messages.push({
+						role: "assistant",
+						content: `❌ Error: ${error.message}`,
+						isError: true,
+					});
+				} finally {
+					renderActiveConversation(chatViewIndex);
+					sendBtn.innerHTML = originalContent;
+					sendBtn.disabled = false;
+					saveToStorage();
+				}
+			}
+			// --- System Prompt Management ---
+			function renderSystemPromptsList() {
+				// This renders the sidebar list of prompts.
+				// The prompt dropdowns in chat views are rendered by renderActiveConversation.
+				const container = document.getElementById("prompts-list");
+				container.innerHTML = "";
+				// The prompt highlighted in the sidebar is always for chat-view-1
+				const activePromptId1 = AppState.activeChatViews[0].systemPromptId;
+				// Sort prompts by name, case-insensitive
+				const sortedPrompts = Object.entries(AppState.systemPrompts).sort(
+					([, a], [, b]) => {
+						return a.name.localeCompare(b.name);
+					},
+				);
+				sortedPrompts.forEach(([id, prompt]) => {
+					const div = document.createElement("div");
+					div.className = `list-item ${
+						id === activePromptId1 ? "active" : ""
+					}`;
+					div.onclick = () => selectSystemPrompt(id, 1); // Clicks on sidebar always update view 1
+					div.innerHTML = `
+                    <div class="list-item-header">
+                        <span class="list-item-name">${prompt.name}</span>
+                        <div class="list-item-actions">
+                            <button class="btn-icon" title="Edit" onclick="event.stopPropagation(); openPromptModal('${id}')">✏️</button>
+                        </div>
+                    </div>
+                    <div class="list-item-preview">${
+						(prompt.content || "Empty prompt...").substring(0, 50)
+					}</div>
+                `;
+					container.appendChild(div);
+				});
+			}
+			function selectSystemPrompt(promptId, chatViewIndex = 1) {
+				const viewIndex = chatViewIndex - 1;
+				AppState.activeChatViews[viewIndex].systemPromptId = promptId;
+				// Update the specific dropdown's selected value
+				document.getElementById(`system-prompt-select-${chatViewIndex}`).value = promptId;
+				// If it's the primary view, also update the sidebar highlighting
+				if (chatViewIndex === 1) {
+					renderSystemPromptsList();
+				}
+				saveToStorage();
+				showNotification(
+					`System prompt updated for Chat View ${chatViewIndex}.`,
+					"info",
+				);
+			}
+			function openPromptModal(promptId = null) {
+				const modal = document.getElementById("prompt-modal");
+				const title = document.getElementById("prompt-modal-title");
+				const idInput = document.getElementById("modal-prompt-id");
+				const nameInput = document.getElementById("modal-prompt-name");
+				const contentInput = document.getElementById("modal-prompt-content");
+				if (promptId && AppState.systemPrompts[promptId]) {
+					const prompt = AppState.systemPrompts[promptId];
+					title.textContent = "Edit System Prompt";
+					idInput.value = promptId;
+					nameInput.value = prompt.name;
+					contentInput.value = prompt.content;
+				} else {
+					title.textContent = "Create New System Prompt";
+					idInput.value = "";
+					nameInput.value = "";
+					contentInput.value = "";
+				}
+				modal.classList.add("visible");
+			}
+			function closePromptModal() {
+				document.getElementById("prompt-modal").classList.remove("visible");
+			}
+			function savePromptFromModal() {
+				const id = document.getElementById("modal-prompt-id").value;
+				const name = document.getElementById("modal-prompt-name").value.trim();
+				const content = document
+					.getElementById("modal-prompt-content")
+					.value.trim();
+				if (!name) {
+					showNotification("Prompt name cannot be empty.", "error");
+					return;
+				}
+				const promptId = id || `custom-${Date.now()}`;
+				const now = Date.now();
+				AppState.systemPrompts[promptId] = {
+					name,
+					content,
+					createdAt: AppState.systemPrompts[promptId]?.createdAt || now,
+					updatedAt: now,
+				};
+				renderSystemPromptsList();
+				// Re-render both chat views to update their prompt dropdowns
+				if (AppState.activeChatViews[0].conversationId) renderActiveConversation(1);
+				if (AppState.activeChatViews[1].conversationId && AppState.splitView) renderActiveConversation(2);
+				saveToStorage();
+				closePromptModal();
+				showNotification("Prompt saved!", "success");
+			}
+			// --- Notebook Management ---
+			function renderNotebookList() {
+				const container = document.getElementById("notebook-list");
+				container.innerHTML = "";
+				// Sort notes by creation date, newest first
+				const sortedNotes = [...AppState.notebook].sort(
+					(a, b) => b.createdAt - a.createdAt,
+				);
+				sortedNotes.forEach((note) => {
+					const div = document.createElement("div");
+					div.className = "list-item";
+					div.onclick = () => openNoteModal(note.id);
+					div.innerHTML = `
+                    <div class="list-item-header">
+                        <span class="list-item-name">Note</span>
+                        <div class="list-item-actions">
+                            <button class="btn-icon" title="Delete" onclick="event.stopPropagation(); deleteNote('${note.id}')">🗑️</button>
+                        </div>
+                    </div>
+                    <div class="list-item-preview">${note.content}</div>
+                `;
+					container.appendChild(div);
+				});
+			}
+			function openNoteModal(noteId = null) {
+				const modal = document.getElementById("note-modal");
+				const title = document.getElementById("note-modal-title");
+				const idInput = document.getElementById("modal-note-id");
+				const contentInput = document.getElementById("modal-note-content");
+				if (noteId && AppState.notebook.find((n) => n.id === noteId)) {
+					const note = AppState.notebook.find((n) => n.id === noteId);
+					title.textContent = "Edit Note";
+					idInput.value = noteId;
+					contentInput.value = note.content;
+				} else {
+					title.textContent = "Create New Note";
+					idInput.value = "";
+					contentInput.value = "";
+				}
+				modal.classList.add("visible");
+			}
+			function closeNoteModal() {
+				document.getElementById("note-modal").classList.remove("visible");
+			}
+			function saveNoteFromModal() {
+				const id = document.getElementById("modal-note-id").value;
+				const content = document
+					.getElementById("modal-note-content")
+					.value.trim();
+				if (!content) return;
+				if (id) {
+					const note = AppState.notebook.find((n) => n.id === id);
+					if (note) note.content = content;
+				} else {
+					AppState.notebook.unshift({
+						id: `note-${Date.now()}`,
+						content: content,
+						createdAt: Date.now(), // Add creation timestamp
+					});
+				}
+				renderNotebookList();
+				saveToStorage();
+				closeNoteModal();
+			}
+			function deleteNote(noteId) {
+				if (confirm("Are you sure you want to delete this note?")) {
+					AppState.notebook = AppState.notebook.filter((n) => n.id !== noteId);
+					renderNotebookList();
+					saveToStorage();
+				}
+			}
+			// --- Utility Functions ---
+			function updateTokenCount(chatViewIndex = 1) {
+				const text = document.getElementById(`user-input-${chatViewIndex}`).value;
+				const tokenCount = Math.ceil(text.length / 4); // Rough approximation
+				document.getElementById(
+					`token-counter-${chatViewIndex}`,
+				).textContent = `Tokens: ${tokenCount}`;
+			}
+			function updateModelOptions() {
+				const modelSelect = document.getElementById("model");
+				modelSelect.innerHTML = "";
+				PROVIDERS.deepseek.models.forEach((model) => {
+					const option = document.createElement("option");
+					option.value = model;
+					option.textContent = model;
+					modelSelect.appendChild(option);
+				});
+			}
+			function showNotification(message, type = "info") {
+				const notification = document.createElement("div");
+				notification.style.cssText = `
+                position: fixed; top: 20px; right: 20px; padding: 12px 20px;
+                border-radius: 6px; color: white; font-weight: 500; z-index: 10001;
+                opacity: 0; transition: opacity 0.3s, transform 0.3s; transform: translateY(-20px);
+                background: ${
+					type === "success" ?
+						"var(--success)" :
+						type === "error" ?
+							"var(--danger)" :
+							"var(--accent)"
+				};
+            `;
+				notification.textContent = message;
+				document.body.appendChild(notification);
+				setTimeout(() => {
+					notification.style.opacity = "1";
+					notification.style.transform = "translateY(0)";
+				}, 10);
+				setTimeout(() => {
+					notification.style.opacity = "0";
+					notification.style.transform = "translateY(-20px)";
+					setTimeout(() => document.body.removeChild(notification), 300);
+				}, 3000);
+			}
+			function downloadFile(content, filename, contentType) {
+				const blob = new Blob([content], { type: contentType });
+				const url = URL.createObjectURL(blob);
+				const a = document.createElement("a");
+				a.href = url;
+				a.download = filename;
+				document.body.appendChild(a);
+				a.click();
+				document.body.removeChild(a);
+				URL.revokeObjectURL(url);
+			}
+			function exportChatMD(chatViewIndex = 1) {
+				const viewState = AppState.activeChatViews[chatViewIndex - 1];
+				const conv = AppState.conversations[viewState.conversationId];
+				if (!conv) {
+					showNotification("No conversation selected for export.", "error");
+					return;
+				}
+				const systemPrompt = AppState.systemPrompts[viewState.systemPromptId];
+				let mdContent = `# Chat Export: ${conv.title}\n\n`;
+				mdContent += `**Model:** ${conv.parameters.model}\n`;
+				mdContent += `**Temperature:** ${conv.parameters.temperature}\n`;
+				mdContent += `**System Prompt: ${systemPrompt.name}**\n`;
+				mdContent += `\`\`\`\n${systemPrompt.content}\n\`\`\`\n\n---\n\n`;
+				conv.messages.forEach((msg) => {
+					const role = msg.role === "user" ? "You" : "Assistant";
+					mdContent += `### **${role}**\n\n`;
+					mdContent += `${msg.content}\n\n---\n\n`;
+				});
+				downloadFile(
+					mdContent,
+					`${conv.title.replace(/\s/g, "_")}.md`,
+					"text/markdown",
+				);
+				showNotification("Conversation exported to Markdown!", "success");
+			}
+			// --- New: Split View Functionality ---
+			function toggleSplitView() {
+				AppState.splitView = !AppState.splitView;
+				const chatView2 = document.getElementById("chat-view-2");
+				if (AppState.splitView) {
+					chatView2.style.display = "flex";
+					// If view 2 has no conversation, and view 1 has one, mirror view 1
+					if (!AppState.activeChatViews[1].conversationId && AppState.activeChatViews[0].conversationId) {
+						AppState.activeChatViews[1].conversationId = AppState.activeChatViews[0].conversationId;
+						// No need to change systemPromptId for view 2, it keeps its own or default.
+					}
+					// Always re-render view 2 to ensure correct display
+					renderActiveConversation(2);
+				} else {
+					chatView2.style.display = "none";
+					AppState.activeChatViews[1].conversationId = null; // Clear conversation for hidden view 2
+					AppState.activeChatViews[1].systemPromptId = "default"; // Reset prompt for hidden view 2
+				}
+				saveToStorage();
+				// renderAll(); // No need for full renderAll, specific renders are enough
+				showNotification(
+					`Split view ${AppState.splitView ? "enabled" : "disabled"}.`,
+					"info",
+				);
+			}
+			// --- Generic Generate Log Functionality (All "Generate X" buttons call this) ---
+			async function generateLog(chatViewIndex, buttonElement) {
+				const viewState = AppState.activeChatViews[chatViewIndex - 1];
+				const conversation = AppState.conversations[viewState.conversationId];
+				if (!conversation) {
+					showNotification("No active conversation selected.", "error");
+					return;
+				}
+				const promptId = buttonElement.dataset.promptId;
+				if (!promptId || !AppState.systemPrompts[promptId]) {
+					showNotification(
+						"Error: Invalid prompt ID for log generation. Check data-prompt-id on button.",
+						"error",
+					);
+					return;
+				}
+				const sendBtn = document.getElementById(`send-btn-${chatViewIndex}`);
+				const originalBtnHTML = buttonElement.innerHTML;
+				const originalSendBtnHTML = sendBtn.innerHTML;
+				// Show loading on the clicked button and disable it
+				buttonElement.innerHTML = '<div class="loading"></div>';
+				buttonElement.disabled = true;
+				// Also disable the main send button while generation is in progress
+				sendBtn.innerHTML = '<div class="loading"></div>';
+				sendBtn.disabled = true;
+				// Store current system prompt ID for this view to restore it later
+				const originalSystemPromptId = viewState.systemPromptId;
+				// Temporarily set the system prompt for THIS VIEW to the selected log generator's prompt
+				viewState.systemPromptId = promptId;
+				try {
+					const response = await callAPI(chatViewIndex); // Call API with the temporarily changed system prompt for this view
+					conversation.messages.push({
+						role: "assistant",
+						content: response,
+						promptId: promptId, // Store the promptId with the message for BRF export and potential future rendering hints
+					});
+				} catch (error) {
+					console.error("API call error during log generation:", error);
+					conversation.messages.push({
+						role: "assistant",
+						content: `❌ Error generating log: ${error.message}`,
+						isError: true,
+						promptId: 'error',
+					});
+				} finally {
+					// Restore the original system prompt for the conversation view
+					viewState.systemPromptId = originalSystemPromptId;
+					renderActiveConversation(chatViewIndex); // Re-render chat with new message
+					// Restore button states
+					buttonElement.innerHTML = originalBtnHTML;
+					buttonElement.disabled = false;
+					sendBtn.innerHTML = originalSendBtnHTML;
+					sendBtn.disabled = false;
+					saveToStorage(); // Save updated conversation to storage
+				}
+			}
+			// --- BRF Import/Export UI Functions ---
+			function exportBRF() {
+				try {
+					const brfData = brfManager.generateBRF({
+						studioVersion: "BAIRC Chat Studio 2.1.0",
+						userId: "user_" + Math.random().toString(36).substr(2, 5),
+					});
+					downloadFile(
+						brfData,
+						`BAIRC_Export_${new Date().toISOString().replace(/[:.-]/g, "")}.json`,
+						"application/json",
+					);
+					showNotification("BRF data exported successfully!", "success");
+				} catch (error) {
+					console.error("BRF Export Error:", error);
+					showNotification(`BRF Export failed: ${error.message}`, "error");
+				}
+			}
+			async function handleBRFImport(event) {
+				const file = event.target.files[0];
+				if (!file) return;
+				const reader = new FileReader();
+				reader.onload = async (e) => {
+					try {
+						const brfContent = e.target.result;
+						await brfManager.importBRF(brfContent, { createBackup: true });
+						showNotification("BRF data imported successfully!", "success");
+						renderAll(); // Re-render the entire UI to reflect imported data
+					} catch (error) {
+						console.error("BRF Import Error:", error);
+						showNotification(`BRF Import failed: ${error.message}`, "error");
+					}
+					event.target.value = ""; // Clear file input
+				};
+				reader.readAsText(file);
+			}
+		</script>
+	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ninjacricket/sorin-s-cat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>