Update index.html

index.html

@@ -20,13 +20,20 @@ body{font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Noto Sans KR
 .logo{display:flex;align-items:center;justify-content:center;gap:15px}
 .logo h1{background:linear-gradient(135deg,#ff6b9d,#c44569);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:26px;letter-spacing:1px;font-weight:700}
 .current-time{font-size:12px;color:#888;margin-top:5px}
+.storage-info{font-size:10px;color:#666;margin-top:3px}
+.storage-info.persistent{color:#28a745}
+.storage-info.local{color:#ffc107}
 .email-section{background:rgba(30,30,30,0.8);backdrop-filter:blur(10px);border-radius:10px;padding:14px;border:1px solid var(--border-color);margin-bottom:12px}
 .email-section label{font-size:12px;color:#888;display:block;margin-bottom:6px}
 .email-section input{width:100%;padding:10px;background:rgba(0,0,0,0.3);border:1px solid #333;border-radius:6px;color:white;font-size:13px}
 .email-section input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 10px rgba(111,66,193,0.2)}
 .sidebar-section{background:rgba(30,30,30,0.8);backdrop-filter:blur(10px);border-radius:10px;padding:14px;border:1px solid var(--border-color);transition:all 0.3s ease}
 .sidebar-section:hover{border-color:var(--primary-color);box-shadow:0 0 15px rgba(111,66,193,0.1)}
-.sidebar-section h3{margin:0 0 12px 0;font-size:13px;text-transform:uppercase;letter-spacing:0.5px;color:#999;font-weight:600}
+.sidebar-section h3{margin:0 0 12px 0;font-size:13px;text-transform:uppercase;letter-spacing:0.5px;color:#999;font-weight:600;display:flex;align-items:center;justify-content:space-between}
+.section-toggle{cursor:pointer;font-size:16px;transition:transform 0.3s}
+.section-toggle.collapsed{transform:rotate(-90deg)}
+.section-content{transition:max-height 0.3s ease-out;overflow:hidden}
+.section-content.collapsed{max-height:0!important}
 .streaming-indicator{display:none;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(135deg,rgba(255,107,107,0.1),rgba(111,66,193,0.1));border-radius:6px;margin-bottom:10px;border:1px solid var(--streaming-color)}
 .streaming-indicator.active{display:flex}
 .streaming-dot{width:8px;height:8px;background:var(--streaming-color);border-radius:50%;animation:pulse 1.5s infinite}
@@ -65,13 +72,37 @@ body{font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Noto Sans KR
 .stat-item{text-align:center}
 .stat-value{font-size:18px;font-weight:bold;color:var(--primary-color)}
 .stat-label{font-size:10px;color:#888;text-transform:uppercase}
+.memory-search-box{display:flex;gap:8px;margin-bottom:10px}
+.memory-search-box input{flex:1;padding:8px;background:rgba(0,0,0,0.3);border:1px solid #333;border-radius:6px;color:white;font-size:12px}
+.memory-search-box button{padding:8px 12px;font-size:11px}
 .memory-list{max-height:150px;overflow-y:auto}
-.memory-item{padding:10px;margin-bottom:8px;background:linear-gradient(135deg,rgba(74,158,255,0.1),rgba(111,66,193,0.1));border-radius:6px;border-left:3px solid var(--memory-color);position:relative;font-size:12px;transition:all 0.3s}
+.memory-item{padding:10px;margin-bottom:8px;background:linear-gradient(135deg,rgba(74,158,255,0.1),rgba(111,66,193,0.1));border-radius:6px;border-left:3px solid var(--memory-color);position:relative;font-size:12px;transition:all 0.3s;cursor:pointer}
 .memory-item:hover{transform:translateX(5px);box-shadow:0 2px 10px rgba(74,158,255,0.2)}
-.memory-item:hover .memory-delete{opacity:1}
-.memory-score{position:absolute;top:5px;right:30px;font-size:10px;color:var(--memory-color);background:rgba(74,158,255,0.2);padding:2px 6px;border-radius:4px}
-.memory-delete{position:absolute;top:5px;right:5px;font-size:14px;color:#ff6b6b;cursor:pointer;opacity:0;transition:opacity 0.3s;background:rgba(255,107,107,0.2);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
-.memory-delete:hover{background:rgba(255,107,107,0.4);transform:scale(1.1)}
+.memory-item:hover .memory-actions{opacity:1}
+.memory-score{position:absolute;top:5px;right:50px;font-size:10px;color:var(--memory-color);background:rgba(74,158,255,0.2);padding:2px 6px;border-radius:4px}
+.memory-actions{position:absolute;top:5px;right:5px;display:flex;gap:4px;opacity:0;transition:opacity 0.3s}
+.memory-action-btn{font-size:12px;cursor:pointer;background:rgba(0,0,0,0.3);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;transition:all 0.2s}
+.memory-action-btn.delete{color:#ff6b6b}
+.memory-action-btn.delete:hover{background:rgba(255,107,107,0.4)}
+.memory-action-btn.like{color:#28a745}
+.memory-action-btn.like:hover{background:rgba(40,167,69,0.4)}
+.memory-action-btn.dislike{color:#ffc107}
+.memory-action-btn.dislike:hover{background:rgba(255,193,7,0.4)}
+.memory-action-btn.link{color:#4a9eff}
+.memory-action-btn.link:hover{background:rgba(74,158,255,0.4)}
+.memory-relations{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(255,255,255,0.1);font-size:10px;color:#888;display:none}
+.memory-item.expanded .memory-relations{display:block}
+.history-section{background:linear-gradient(135deg,rgba(46,204,113,0.1),rgba(39,174,96,0.1));border:1px solid rgba(46,204,113,0.3)}
+.history-list{max-height:120px;overflow-y:auto}
+.history-item{padding:8px 10px;margin-bottom:6px;background:rgba(0,0,0,0.3);border-radius:6px;cursor:pointer;transition:all 0.2s;font-size:11px;display:flex;justify-content:space-between;align-items:center}
+.history-item:hover{background:rgba(46,204,113,0.2);transform:translateX(3px)}
+.history-item .date{color:#888;font-size:10px}
+.history-item .summary{flex:1;margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.tools-section{background:linear-gradient(135deg,rgba(155,89,182,0.1),rgba(142,68,173,0.1));border:1px solid rgba(155,89,182,0.3)}
+.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
+.tool-btn{padding:10px;background:rgba(0,0,0,0.3);border:1px solid #333;border-radius:6px;cursor:pointer;transition:all 0.2s;text-align:center;font-size:11px;color:#aaa}
+.tool-btn:hover{background:rgba(155,89,182,0.2);border-color:#9b59b6;color:white}
+.tool-btn i{display:block;font-size:16px;margin-bottom:4px}
 .chat-container{border-radius:10px;background:rgba(30,30,30,0.8);backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(0,0,0,0.3);padding:15px;flex-grow:1;display:flex;flex-direction:column;border:1px solid var(--border-color);overflow:hidden;min-height:0;height:100%}
 .chat-messages{flex-grow:1;overflow-y:auto;padding:10px;scrollbar-width:thin;scrollbar-color:var(--primary-color) transparent;min-height:0;max-height:calc(100vh - 280px)}
 .message{margin-bottom:12px;padding:12px 16px;border-radius:10px;font-size:15px;line-height:1.8;position:relative;max-width:85%;animation:slideIn 0.3s ease-out;word-wrap:break-word}
@@ -97,11 +128,28 @@ button{background:linear-gradient(135deg,#c44569,#ff6b9d);color:white;border:non
 button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,107,157,0.5)}
 button:disabled{opacity:0.5;cursor:not-allowed}
 #send-button{background:linear-gradient(135deg,#2ecc71,#27ae60)}
+.auto-save-indicator{font-size:10px;color:#888;text-align:center;margin-top:8px}
+.auto-save-indicator.saving{color:#ffc107}
+.auto-save-indicator.saved{color:#28a745}
 .toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:14px 24px;border-radius:8px;font-size:14px;z-index:1000;display:none;box-shadow:0 4px 12px rgba(0,0,0,0.3);animation:slideDown 0.3s ease-out}
 @keyframes slideDown{from{transform:translateX(-50%) translateY(-20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
 .toast.success{background:linear-gradient(135deg,#4caf50,#45a049);color:white}
 .toast.error{background:linear-gradient(135deg,#f44336,#e53935);color:white}
 .toast.warning{background:linear-gradient(135deg,var(--warning-color),#ff9800);color:#333}
+.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:1000}
+.modal-overlay.active{display:flex}
+.modal{background:var(--card-bg);border-radius:12px;padding:20px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;border:1px solid var(--border-color)}
+.modal h3{margin-bottom:15px;color:#ff6b9d}
+.modal-close{float:right;cursor:pointer;font-size:20px;color:#888}
+.modal-close:hover{color:white}
+.modal input,.modal textarea{width:100%;padding:10px;margin-bottom:10px;background:rgba(0,0,0,0.3);border:1px solid #333;border-radius:6px;color:white;font-size:13px}
+.modal textarea{min-height:100px;resize:vertical}
+.modal-actions{display:flex;gap:10px;margin-top:15px}
+.modal-actions button{flex:1}
+.relation-graph{background:rgba(0,0,0,0.3);border-radius:8px;padding:10px;margin-top:10px}
+.relation-item{display:flex;align-items:center;gap:8px;padding:6px;margin-bottom:4px;background:rgba(74,158,255,0.1);border-radius:4px;font-size:11px}
+.relation-strength{width:50px;height:6px;background:#333;border-radius:3px;overflow:hidden}
+.relation-strength-fill{height:100%;background:linear-gradient(90deg,#4a9eff,#ff6b9d);border-radius:3px}
 .api-section{background:rgba(30,30,30,0.95);border-top:1px solid var(--border-color);padding:15px;margin-top:15px}
 .api-section h3{text-align:center;margin-bottom:10px;color:#888;font-size:12px;text-transform:uppercase}
 .api-docs-container{background:rgba(0,0,0,0.3);border-radius:10px;padding:20px;border:1px solid var(--border-color);max-height:500px;overflow-y:auto;display:none}
@@ -113,19 +161,54 @@ button:disabled{opacity:0.5;cursor:not-allowed}
 .api-method.delete{background:#dc3545;color:white}
 .api-url{font-family:monospace;color:#4a9eff;font-size:13px}
 .api-desc{color:#aaa;font-size:12px;margin-top:8px;line-height:1.5}
-.api-params{margin-top:10px;font-size:12px}
-.api-params code{background:rgba(0,0,0,0.4);padding:2px 6px;border-radius:3px;color:#e06c75}
 .collapse-btn{background:rgba(0,0,0,0.3);border:1px solid var(--border-color);color:#888;padding:8px 20px;font-size:11px;margin:0 auto;display:block;margin-bottom:10px}
 .collapse-btn:hover{background:rgba(111,66,193,0.2);color:white}
-@media (max-width:768px){.main-content{flex-direction:column}.sidebar{width:100%;max-height:none}.health-stats{grid-template-columns:1fr 1fr}}
+@media (max-width:768px){.main-content{flex-direction:column}.sidebar{width:100%;max-height:none}.health-stats{grid-template-columns:1fr 1fr}.tool-grid{grid-template-columns:1fr}}
 </style>
 </head>
 <body>
 <div id="error-toast" class="toast"></div>
+
+<!-- 기억 관계 모달 -->
+<div class="modal-overlay" id="relation-modal">
+<div class="modal">
+<span class="modal-close" onclick="closeModal('relation-modal')">&times;</span>
+<h3>🔗 기억 연관 관계</h3>
+<div id="relation-content"></div>
+</div>
+</div>
+
+<!-- URL 크롤링 모달 -->
+<div class="modal-overlay" id="crawl-modal">
+<div class="modal">
+<span class="modal-close" onclick="closeModal('crawl-modal')">&times;</span>
+<h3>🌐 URL 크롤링</h3>
+<input type="url" id="crawl-url-input" placeholder="https://example.com">
+<div class="modal-actions">
+<button onclick="crawlUrl()">크롤링 시작</button>
+</div>
+<div id="crawl-result" style="margin-top:15px;font-size:12px;max-height:300px;overflow-y:auto;"></div>
+</div>
+</div>
+
+<!-- 웹 검색 모달 -->
+<div class="modal-overlay" id="search-modal">
+<div class="modal">
+<span class="modal-close" onclick="closeModal('search-modal')">&times;</span>
+<h3>🔍 웹 검색 테스트</h3>
+<input type="text" id="search-query-input" placeholder="검색어 입력...">
+<div class="modal-actions">
+<button onclick="testWebSearch()">검색</button>
+</div>
+<div id="search-result" style="margin-top:15px;font-size:12px;max-height:300px;overflow-y:auto;"></div>
+</div>
+</div>
+
 <div class="container">
 <div class="header">
 <div class="logo"><h1>시니어 말벗 AI</h1></div>
 <div class="current-time" id="current-time"></div>
+<div class="storage-info" id="storage-info">스토리지 확인 중...</div>
 </div>
 <div class="main-content">
 <div class="sidebar">
@@ -133,8 +216,11 @@ button:disabled{opacity:0.5;cursor:not-allowed}
 <label>이메일 (필수)</label>
 <input type="email" id="user-email" placeholder="your@email.com">
 </div>
+
+<!-- 건강 상태 섹션 -->
 <div class="sidebar-section health-section">
-<h3>건강 상태 진단</h3>
+<h3>건강 상태 진단 <span class="section-toggle" data-target="health-content">▼</span></h3>
+<div class="section-content" id="health-content">
 <div class="health-gauge">
 <div class="gauge-container">
 <div class="gauge-bg"></div>
@@ -166,8 +252,12 @@ button:disabled{opacity:0.5;cursor:not-allowed}
 <canvas id="health-chart"></canvas>
 </div>
 </div>
+</div>
+
+<!-- 설정 섹션 -->
 <div class="sidebar-section">
-<h3>설정</h3>
+<h3>설정 <span class="section-toggle" data-target="settings-content">▼</span></h3>
+<div class="section-content" id="settings-content">
 <div class="settings-grid">
 <div class="setting-item">
 <span class="setting-label">웹 검색</span>
@@ -181,25 +271,73 @@ button:disabled{opacity:0.5;cursor:not-allowed}
 <span class="setting-label">스트리밍</span>
 <div id="streaming-toggle" class="toggle-switch active"><div class="toggle-slider"></div></div>
 </div>
+<div class="setting-item">
+<span class="setting-label">자동 저장 (3분)</span>
+<div id="autosave-toggle" class="toggle-switch active"><div class="toggle-slider"></div></div>
+</div>
 </div>
 <div style="margin-top:12px;">
 <label style="font-size:12px;color:#888;">이름 (호칭)</label>
 <input type="text" id="user-name" placeholder="어르신 성함..." style="width:100%;margin-top:4px;padding:8px;background:rgba(0,0,0,0.3);border:1px solid #333;border-radius:6px;color:white;font-size:12px;">
 </div>
 </div>
+</div>
+
+<!-- 대화 히스토리 섹션 (새로 추가) -->
+<div class="sidebar-section history-section">
+<h3>📜 이전 대화 <span class="section-toggle" data-target="history-content">▼</span></h3>
+<div class="section-content" id="history-content">
+<div class="history-list" id="history-list">
+<div style="text-align:center;color:#888;font-size:11px;padding:20px;">이전 대화가 없습니다</div>
+</div>
+</div>
+</div>
+
+<!-- 대화 기억 섹션 -->
 <div class="sidebar-section">
-<h3>대화 기억</h3>
+<h3>대화 기억 <span class="section-toggle" data-target="memory-content">▼</span></h3>
+<div class="section-content" id="memory-content">
 <div class="memory-stats">
 <div class="stat-item"><div class="stat-value" id="memory-count">0</div><div class="stat-label">총 기억</div></div>
 <div class="stat-item"><div class="stat-value" id="vector-count">0</div><div class="stat-label">중요 기억</div></div>
 <div class="stat-item"><div class="stat-value" id="relation-count">0</div><div class="stat-label">연관 관계</div></div>
 </div>
+<!-- 기억 검색 (새로 추가) -->
+<div class="memory-search-box">
+<input type="text" id="memory-search-input" placeholder="기억 검색...">
+<button onclick="searchMemories()">검색</button>
+</div>
 <div class="memory-list" id="memory-list"></div>
 </div>
+</div>
+
+<!-- 도구 섹션 (새로 추가) -->
+<div class="sidebar-section tools-section">
+<h3>🛠 도구 <span class="section-toggle" data-target="tools-content">▼</span></h3>
+<div class="section-content" id="tools-content">
+<div class="tool-grid">
+<div class="tool-btn" onclick="openModal('crawl-modal')">
+<i>🌐</i>URL 크롤링
+</div>
+<div class="tool-btn" onclick="openModal('search-modal')">
+<i>🔍</i>웹 검색
+</div>
+<div class="tool-btn" onclick="loadStorageInfo()">
+<i>💾</i>스토리지 정보
+</div>
+<div class="tool-btn" onclick="exportMemories()">
+<i>📤</i>기억 내보내기
+</div>
+</div>
+</div>
+</div>
+
 <div style="text-align:center;margin-top:10px;">
 <button id="end-session-button">대화 저장하기</button>
+<div class="auto-save-indicator" id="auto-save-indicator">자동 저장 대기 중</div>
 </div>
 </div>
+
 <div class="chat-section">
 <div class="chat-container">
 <div class="streaming-indicator" id="streaming-indicator"><div class="streaming-dot"></div><span style="font-size:12px;color:var(--streaming-color);">응답 생성 중...</span></div>
@@ -221,6 +359,7 @@ button:disabled{opacity:0.5;cursor:not-allowed}
 </div>
 </div>
 </div>
+
 <div class="api-section" id="api-section">
 <button class="collapse-btn" id="api-collapse-btn">API 문서 열기/닫기</button>
 <h3>API 엔드포인트 가이드</h3>
@@ -235,7 +374,16 @@ button:disabled{opacity:0.5;cursor:not-allowed}
 <h4>새 세션 생성</h4>
 <span class="api-method post">POST</span>
 <span class="api-url">/session/new</span>
-<div class="api-desc">새로운 대화 세션을 시작합니다.</div>
+</div>
+<div class="api-endpoint">
+<h4>세션 종료 및 저장</h4>
+<span class="api-method post">POST</span>
+<span class="api-url">/session/end</span>
+</div>
+<div class="api-endpoint">
+<h4>자동 저장</h4>
+<span class="api-method post">POST</span>
+<span class="api-url">/session/auto-save</span>
 </div>
 <div class="api-endpoint">
 <h4>건강 상태 조회</h4>
@@ -243,29 +391,86 @@ button:disabled{opacity:0.5;cursor:not-allowed}
 <span class="api-url">/health/current?user_email={email}</span>
 </div>
 <div class="api-endpoint">
+<h4>건강 히스토리</h4>
+<span class="api-method get">GET</span>
+<span class="api-url">/health/history?user_email={email}&days=30</span>
+</div>
+<div class="api-endpoint">
 <h4>기억 검색</h4>
 <span class="api-method post">POST</span>
 <span class="api-url">/memory/search</span>
+<div class="api-desc">시맨틱 검색으로 관련 기억을 찾습니다.</div>
+</div>
+<div class="api-endpoint">
+<h4>기억 피드백</h4>
+<span class="api-method post">POST</span>
+<span class="api-url">/memory/feedback</span>
+<div class="api-desc">기억에 대한 피드백으로 강화학습을 수행합니다.</div>
+</div>
+<div class="api-endpoint">
+<h4>기억 관계 조회</h4>
+<span class="api-method get">GET</span>
+<span class="api-url">/memory/relationships/{memory_id}?user_email={email}</span>
+</div>
+<div class="api-endpoint">
+<h4>기억 그래프 통계</h4>
+<span class="api-method get">GET</span>
+<span class="api-url">/memory/graph/stats?user_email={email}</span>
 </div>
 <div class="api-endpoint">
 <h4>모든 기억 조회</h4>
 <span class="api-method get">GET</span>
 <span class="api-url">/memory/all?user_email={email}</span>
 </div>
+<div class="api-endpoint">
+<h4>기억 삭제</h4>
+<span class="api-method delete">DELETE</span>
+<span class="api-url">/memory/{memory_id}?user_email={email}</span>
 </div>
+<div class="api-endpoint">
+<h4>최근 대화 목록</h4>
+<span class="api-method get">GET</span>
+<span class="api-url">/history/recent?user_email={email}</span>
 </div>
+<div class="api-endpoint">
+<h4>대화 내용 조회</h4>
+<span class="api-method get">GET</span>
+<span class="api-url">/history/{session_id}?user_email={email}</span>
+</div>
+<div class="api-endpoint">
+<h4>웹 검색</h4>
+<span class="api-method post">POST</span>
+<span class="api-url">/search/web</span>
+</div>
+<div class="api-endpoint">
+<h4>URL 크롤링</h4>
+<span class="api-method post">POST</span>
+<span class="api-url">/crawl/url</span>
+</div>
+<div class="api-endpoint">
+<h4>스토리지 정보</h4>
+<span class="api-method get">GET</span>
+<span class="api-url">/storage/info</span>
+</div>
+</div>
+</div>
+
 <script>
-let webSearchEnabled=true,selfLearningEnabled=true,streamingEnabled=true,currentSessionId=null;
+let webSearchEnabled=true,selfLearningEnabled=true,streamingEnabled=true,autoSaveEnabled=true;
+let currentSessionId=null,autoSaveInterval=null;
 let userName=localStorage.getItem('userName')||'';
 let userEmail=localStorage.getItem('userEmail')||'';
 let userMemories={},isStreaming=false,healthChart=null;
+
 marked.setOptions({breaks:true,gfm:true,headerIds:false,mangle:false});
+
 function scoreToLabel(score){
 if(score>=80)return{text:'양호',class:'good'};
 if(score>=60)return{text:'보통',class:'normal'};
 if(score>=40)return{text:'위험',class:'warning'};
 return{text:'긴급',class:'critical'};
 }
+
 const elements={
 endSessionButton:document.getElementById('end-session-button'),
 sendButton:document.getElementById('send-button'),
@@ -273,12 +478,16 @@ chatMessages:document.getElementById('chat-messages'),
 searchToggle:document.getElementById('search-toggle'),
 learningToggle:document.getElementById('learning-toggle'),
 streamingToggle:document.getElementById('streaming-toggle'),
+autosaveToggle:document.getElementById('autosave-toggle'),
 textInput:document.getElementById('text-input'),
 memoryList:document.getElementById('memory-list'),
+historyList:document.getElementById('history-list'),
 userNameInput:document.getElementById('user-name'),
 userEmailInput:document.getElementById('user-email'),
 currentTimeDiv:document.getElementById('current-time'),
+storageInfo:document.getElementById('storage-info'),
 streamingIndicator:document.getElementById('streaming-indicator'),
+autoSaveIndicator:document.getElementById('auto-save-indicator'),
 memoryCount:document.getElementById('memory-count'),
 vectorCount:document.getElementById('vector-count'),
 relationCount:document.getElementById('relation-count'),
@@ -290,8 +499,29 @@ conversationValue:document.getElementById('conversation-value'),
 memoryValue:document.getElementById('memory-value'),
 emotionalValue:document.getElementById('emotional-value'),
 apiCollapseBtn:document.getElementById('api-collapse-btn'),
-apiDocsContainer:document.getElementById('api-docs-container')
+apiDocsContainer:document.getElementById('api-docs-container'),
+memorySearchInput:document.getElementById('memory-search-input')
 };
+
+// 섹션 접기/펼치기
+document.querySelectorAll('.section-toggle').forEach(toggle=>{
+toggle.addEventListener('click',()=>{
+const targetId=toggle.dataset.target;
+const content=document.getElementById(targetId);
+content.classList.toggle('collapsed');
+toggle.classList.toggle('collapsed');
+});
+});
+
+// 모달 관리
+function openModal(modalId){
+document.getElementById(modalId).classList.add('active');
+}
+function closeModal(modalId){
+document.getElementById(modalId).classList.remove('active');
+}
+
+// API 문서 토글
 elements.apiCollapseBtn.addEventListener('click',()=>{
 const container=elements.apiDocsContainer;
 if(container.style.display==='none'||container.style.display===''){
@@ -302,6 +532,8 @@ container.style.display='none';
 elements.apiCollapseBtn.textContent='API 문서 열기/닫기';
 }
 });
+
+// 건강 차트 초기화
 function initHealthChart(){
 const ctx=document.getElementById('health-chart').getContext('2d');
 healthChart=new Chart(ctx,{
@@ -315,6 +547,7 @@ data:{labels:[],datasets:[
 options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:true,position:'bottom',labels:{boxWidth:8,padding:8,font:{size:9},color:'#888'}}},scales:{x:{display:true,grid:{color:'rgba(255,255,255,0.05)'},ticks:{font:{size:8},color:'#666',maxRotation:0}},y:{display:true,min:0,max:100,grid:{color:'rgba(255,255,255,0.05)'},ticks:{font:{size:8},color:'#666'}}}}
 });
 }
+
 function updateGauge(riskLevel,riskLabel){
 const angle=-90+(riskLevel/100)*180;
 elements.gaugeNeedle.style.transform='rotate('+angle+'deg)';
@@ -323,11 +556,41 @@ elements.gaugeValue.textContent=label.text;
 elements.gaugeLabel.textContent=riskLabel||label.text;
 elements.gaugeLabel.className='gauge-label '+label.class;
 }
+
 function updateHealthStat(element,score){
 const label=scoreToLabel(score);
 element.textContent=label.text;
 element.className='health-stat-value '+label.class;
 }
+
+// 스토리지 정보 로드 (새로 추가)
+async function loadStorageInfo(){
+try{
+const response=await fetch('/storage/info');
+const data=await response.json();
+if(data.is_persistent){
+elements.storageInfo.textContent='💾 영구 스토리지 활성화 ('+formatBytes(data.db_size)+')';
+elements.storageInfo.className='storage-info persistent';
+}else{
+elements.storageInfo.textContent='⚠️ 로컬 스토리지 (임시)';
+elements.storageInfo.className='storage-info local';
+}
+showToast('스토리지: '+(data.is_persistent?'영구':'임시')+' / DB: '+formatBytes(data.db_size),'success');
+}catch(error){
+elements.storageInfo.textContent='스토리지 정보 없음';
+console.error('Storage info error:',error);
+}
+}
+
+function formatBytes(bytes){
+if(bytes===0)return'0 Bytes';
+const k=1024;
+const sizes=['Bytes','KB','MB','GB'];
+const i=Math.floor(Math.log(bytes)/Math.log(k));
+return parseFloat((bytes/Math.pow(k,i)).toFixed(2))+' '+sizes[i];
+}
+
+// 건강 상태 로드
 async function loadHealthStatus(){
 if(!userEmail)return;
 try{
@@ -342,6 +605,7 @@ updateGauge(data.risk_level||70,data.risk_label||'양호');
 }
 }catch(error){console.error('Failed to load health status:',error);}
 }
+
 async function loadHealthHistory(){
 if(!userEmail)return;
 try{
@@ -362,6 +626,51 @@ healthChart.update();
 }
 }catch(error){console.error('Failed to load health history:',error);}
 }
+
+// 최근 대화 히스토리 로드 (새로 추가)
+async function loadRecentHistory(){
+if(!userEmail)return;
+try{
+const response=await fetch('/history/recent?user_email='+encodeURIComponent(userEmail));
+const history=await response.json();
+if(Array.isArray(history)&&history.length>0){
+elements.historyList.innerHTML='';
+history.forEach(h=>{
+const item=document.createElement('div');
+item.className='history-item';
+const date=new Date(h.created_at);
+const dateStr=(date.getMonth()+1)+'/'+date.getDate()+' '+date.getHours()+':'+String(date.getMinutes()).padStart(2,'0');
+item.innerHTML='<span class="date">'+dateStr+'</span><span class="summary">'+(h.summary||'대화 내용')+'</span>';
+item.onclick=()=>loadConversation(h.id);
+elements.historyList.appendChild(item);
+});
+}else{
+elements.historyList.innerHTML='<div style="text-align:center;color:#888;font-size:11px;padding:20px;">이전 대화가 없습니다</div>';
+}
+}catch(error){console.error('Failed to load history:',error);}
+}
+
+// 이전 대화 불러오기 (새로 추가)
+async function loadConversation(sessionId){
+if(!userEmail)return;
+try{
+const response=await fetch('/history/'+sessionId+'?user_email='+encodeURIComponent(userEmail));
+const messages=await response.json();
+if(Array.isArray(messages)&&messages.length>0){
+elements.chatMessages.innerHTML='';
+messages.forEach(msg=>{
+addMessage(msg.role,msg.content);
+});
+currentSessionId=sessionId;
+showToast('이전 대화를 불러왔습니다.','success');
+}
+}catch(error){
+console.error('Failed to load conversation:',error);
+showToast('대화 불러오기 실패','error');
+}
+}
+
+// 그래프 통계 로드
 async function loadGraphStats(){
 if(!userEmail)return;
 try{
@@ -370,6 +679,189 @@ const stats=await response.json();
 if(stats.total_edges!==undefined){elements.relationCount.textContent=stats.total_edges;}
 }catch(error){console.error('Failed to load graph stats:',error);}
 }
+
+// 기억 검색 (새로 추가)
+async function searchMemories(){
+const query=elements.memorySearchInput.value.trim();
+if(!query||!userEmail){
+showToast('검색어를 입력해주세요.','warning');
+return;
+}
+try{
+const response=await fetch('/memory/search',{
+method:'POST',
+headers:{'Content-Type':'application/json'},
+body:JSON.stringify({query:query,user_email:userEmail,k:20,threshold:0.5})
+});
+const data=await response.json();
+if(data.results&&data.results.length>0){
+displayMemories(data.results);
+showToast(data.results.length+'개의 관련 기억을 찾았습니다.','success');
+}else{
+showToast('관련 기억이 없습니다.','warning');
+}
+}catch(error){
+console.error('Memory search error:',error);
+showToast('검색 중 오류가 발생했습니다.','error');
+}
+}
+
+// 기억 관계 조회 (새로 추가)
+async function showMemoryRelations(memoryId){
+if(!userEmail)return;
+try{
+const response=await fetch('/memory/relationships/'+memoryId+'?user_email='+encodeURIComponent(userEmail));
+const data=await response.json();
+const container=document.getElementById('relation-content');
+if(data.direct_relationships&&data.direct_relationships.length>0){
+let html='<div class="relation-graph">';
+data.direct_relationships.forEach(rel=>{
+const strengthPercent=(rel.strength*100).toFixed(0);
+html+='<div class="relation-item">';
+html+='<div class="relation-strength"><div class="relation-strength-fill" style="width:'+strengthPercent+'%"></div></div>';
+html+='<span style="flex:1">'+rel.content_preview+'</span>';
+html+='</div>';
+});
+html+='</div>';
+html+='<p style="margin-top:10px;font-size:11px;color:#888;">총 '+data.total_connections+'개의 연결</p>';
+container.innerHTML=html;
+}else{
+container.innerHTML='<p style="color:#888;">연관된 기억이 없습니다.</p>';
+}
+openModal('relation-modal');
+}catch(error){
+console.error('Relations error:',error);
+showToast('관계 조회 실패','error');
+}
+}
+
+// 기억 피드백 (새로 추가)
+async function sendMemoryFeedback(memoryId,feedback){
+if(!userEmail)return;
+try{
+await fetch('/memory/feedback',{
+method:'POST',
+headers:{'Content-Type':'application/json'},
+body:JSON.stringify({
+memory_ids:[memoryId],
+feedback:feedback,
+context:{},
+user_email:userEmail
+})
+});
+showToast('피드백이 반영되었습니다.','success');
+}catch(error){
+console.error('Feedback error:',error);
+}
+}
+
+// URL 크롤링 (새로 추가)
+async function crawlUrl(){
+const url=document.getElementById('crawl-url-input').value.trim();
+if(!url){
+showToast('URL을 입력해주세요.','warning');
+return;
+}
+const resultDiv=document.getElementById('crawl-result');
+resultDiv.innerHTML='<p style="color:#888;">크롤링 중...</p>';
+try{
+const response=await fetch('/crawl/url',{
+method:'POST',
+headers:{'Content-Type':'application/json'},
+body:JSON.stringify({url:url})
+});
+const data=await response.json();
+if(data.success){
+resultDiv.innerHTML='<h4 style="color:#28a745;">✓ 성공</h4>'+
+'<p><strong>제목:</strong> '+data.title+'</p>'+
+'<p><strong>길이:</strong> '+data.content_length+'자</p>'+
+'<div style="max-height:200px;overflow-y:auto;background:rgba(0,0,0,0.3);padding:10px;border-radius:6px;margin-top:10px;">'+
+data.content.substring(0,2000)+'...</div>';
+}else{
+resultDiv.innerHTML='<p style="color:#dc3545;">오류: '+data.error+'</p>';
+}
+}catch(error){
+resultDiv.innerHTML='<p style="color:#dc3545;">크롤링 실패: '+error.message+'</p>';
+}
+}
+
+// 웹 검색 테스트 (새로 추가)
+async function testWebSearch(){
+const query=document.getElementById('search-query-input').value.trim();
+if(!query){
+showToast('검색어를 입력해주세요.','warning');
+return;
+}
+const resultDiv=document.getElementById('search-result');
+resultDiv.innerHTML='<p style="color:#888;">검색 중...</p>';
+try{
+const response=await fetch('/search/web',{
+method:'POST',
+headers:{'Content-Type':'application/json'},
+body:JSON.stringify({query:query,count:5})
+});
+const data=await response.json();
+if(data.results&&data.results.length>0){
+let html='<p style="color:#28a745;">'+data.count+'개 결과</p>';
+data.results.forEach((r,i)=>{
+html+='<div style="margin:10px 0;padding:10px;background:rgba(0,0,0,0.3);border-radius:6px;">';
+html+='<a href="'+r.url+'" target="_blank" style="color:#4a9eff;text-decoration:none;">'+(i+1)+'. '+r.title+'</a>';
+html+='<p style="color:#aaa;font-size:11px;margin-top:5px;">'+r.description+'</p>';
+html+='</div>';
+});
+resultDiv.innerHTML=html;
+}else{
+resultDiv.innerHTML='<p style="color:#ffc107;">검색 결과가 없습니다.</p>';
+}
+}catch(error){
+resultDiv.innerHTML='<p style="color:#dc3545;">검색 실패: '+error.message+'</p>';
+}
+}
+
+// 기억 내보내기 (새로 추가)
+async function exportMemories(){
+if(!userEmail)return;
+try{
+const response=await fetch('/memory/all?user_email='+encodeURIComponent(userEmail));
+const memories=await response.json();
+const dataStr=JSON.stringify(memories,null,2);
+const blob=new Blob([dataStr],{type:'application/json'});
+const url=URL.createObjectURL(blob);
+const a=document.createElement('a');
+a.href=url;
+a.download='memories_'+userEmail.split('@')[0]+'_'+new Date().toISOString().split('T')[0]+'.json';
+a.click();
+URL.revokeObjectURL(url);
+showToast('기억이 내보내졌습니다.','success');
+}catch(error){
+showToast('내보내기 실패','error');
+}
+}
+
+// 자동 저장 (새로 추가)
+function startAutoSave(){
+if(autoSaveInterval)clearInterval(autoSaveInterval);
+if(!autoSaveEnabled)return;
+autoSaveInterval=setInterval(async()=>{
+if(currentSessionId&&userEmail){
+elements.autoSaveIndicator.textContent='자동 저장 중...';
+elements.autoSaveIndicator.className='auto-save-indicator saving';
+try{
+await fetch('/session/auto-save',{
+method:'POST',
+headers:{'Content-Type':'application/json'},
+body:JSON.stringify({session_id:currentSessionId,user_email:userEmail})
+});
+elements.autoSaveIndicator.textContent='자동 저장 완료 ('+new Date().toLocaleTimeString()+')';
+elements.autoSaveIndicator.className='auto-save-indicator saved';
+}catch(error){
+elements.autoSaveIndicator.textContent='자동 저장 실패';
+console.error('Auto-save error:',error);
+}
+}
+},180000); // 3분
+}
+
 function updateCurrentTime(){
 const now=new Date();
 const kstTime=new Date(now.toLocaleString("en-US",{timeZone:"Asia/Seoul"}));
@@ -378,13 +870,22 @@ elements.currentTimeDiv.textContent=timeString;
 }
 updateCurrentTime();
 setInterval(updateCurrentTime,1000);
+
 elements.userNameInput.value=userName;
 elements.userEmailInput.value=userEmail;
 elements.userNameInput.addEventListener('input',()=>{userName=elements.userNameInput.value;localStorage.setItem('userName',userName);});
 elements.userEmailInput.addEventListener('input',()=>{userEmail=elements.userEmailInput.value.trim();localStorage.setItem('userEmail',userEmail);});
+
 elements.searchToggle.addEventListener('click',()=>{webSearchEnabled=!webSearchEnabled;elements.searchToggle.classList.toggle('active',webSearchEnabled);showToast(webSearchEnabled?'웹 검색 활성화':'웹 검색 비활성화','success');});
 elements.learningToggle.addEventListener('click',()=>{selfLearningEnabled=!selfLearningEnabled;elements.learningToggle.classList.toggle('active',selfLearningEnabled);showToast(selfLearningEnabled?'자가 학습 활성화':'자가 학습 비활성화','success');});
 elements.streamingToggle.addEventListener('click',()=>{streamingEnabled=!streamingEnabled;elements.streamingToggle.classList.toggle('active',streamingEnabled);showToast(streamingEnabled?'스트리밍 활성화':'스트리밍 비활성화','success');});
+elements.autosaveToggle.addEventListener('click',()=>{
+autoSaveEnabled=!autoSaveEnabled;
+elements.autosaveToggle.classList.toggle('active',autoSaveEnabled);
+if(autoSaveEnabled){startAutoSave();showToast('자동 저장 활성화','success');}
+else{if(autoSaveInterval)clearInterval(autoSaveInterval);showToast('자동 저장 비활성화','success');}
+});
+
 async function deleteMemory(memoryId,element){
 if(!confirm('이 기억을 삭제하시겠습니까?'))return;
 try{
@@ -393,6 +894,7 @@ if(response.ok){element.remove();showToast('기억이 삭제되었습니다.','s
 else{showToast('삭제 실패','error');}
 }catch(error){console.error('Delete memory error:',error);showToast('삭제 중 오류가 발생했습니다.','error');}
 }
+
 async function sendMessage(){
 const message=elements.textInput.value.trim();
 userEmail=elements.userEmailInput.value.trim();
@@ -406,6 +908,7 @@ elements.textInput.value='';
 if(streamingEnabled){await sendStreamingMessage(message);}
 else{showToast('스트리밍을 활성화해주세요.','warning');}
 }
+
 async function sendStreamingMessage(message){
 isStreaming=true;
 elements.sendButton.disabled=true;
@@ -437,6 +940,7 @@ catch(e){console.log('Parse error:',e,data);}
 }catch(error){console.error('Streaming error:',error);assistantMessage.classList.remove('streaming');assistantMessage.textContent='오류: '+error.message;showToast('스트리밍 중 오류가 발생했습니다.','error');}
 finally{isStreaming=false;elements.sendButton.disabled=false;elements.streamingIndicator.classList.remove('active');await loadMemories();await loadHealthStatus();await loadHealthHistory();}
 }
+
 function addMessage(role,content){
 const messageDiv=document.createElement('div');
 messageDiv.classList.add('message',role);
@@ -445,27 +949,47 @@ else{messageDiv.textContent=content;}
 elements.chatMessages.appendChild(messageDiv);
 elements.chatMessages.scrollTop=elements.chatMessages.scrollHeight;
 }
+
+function displayMemories(memories){
+elements.memoryList.innerHTML='';
+memories.forEach(memory=>{
+const item=document.createElement('div');
+item.className='memory-item';
+item.dataset.id=memory.id;
+const importance=(memory.importance*100).toFixed(0);
+item.innerHTML=`
+<div class="memory-score">${importance}%</div>
+<div class="memory-actions">
+<span class="memory-action-btn like" onclick="event.stopPropagation();sendMemoryFeedback(${memory.id},'좋아요')" title="좋아요">👍</span>
+<span class="memory-action-btn dislike" onclick="event.stopPropagation();sendMemoryFeedback(${memory.id},'별로')" title="별로">👎</span>
+<span class="memory-action-btn link" onclick="event.stopPropagation();showMemoryRelations(${memory.id})" title="연관 관계">🔗</span>
+<span class="memory-action-btn delete" onclick="event.stopPropagation();deleteMemory(${memory.id},this.closest('.memory-item'))" title="삭제">✕</span>
+</div>
+<div style="font-size:10px;color:#888;margin-bottom:4px;">${memory.category}</div>
+<div>${memory.content}</div>
+`;
+item.onclick=()=>item.classList.toggle('expanded');
+elements.memoryList.appendChild(item);
+});
+}
+
 async function loadMemories(){
 if(!userEmail)return;
 try{
 const response=await fetch('/memory/all?user_email='+encodeURIComponent(userEmail));
 const memories=await response.json();
 userMemories={};
-elements.memoryList.innerHTML='';
 memories.forEach(memory=>{
 if(!userMemories[memory.category]){userMemories[memory.category]=[];}
 userMemories[memory.category].push(memory.content);
-const item=document.createElement('div');
-item.className='memory-item';
-const importance=(memory.importance*100).toFixed(0);
-item.innerHTML='<div class="memory-score">'+importance+'%</div><div class="memory-delete" onclick="deleteMemory('+memory.id+', this.parentElement)">X</div><div style="font-size:10px;color:#888;margin-bottom:4px;">'+memory.category+'</div><div>'+memory.content+'</div>';
-elements.memoryList.appendChild(item);
 });
+displayMemories(memories);
 elements.memoryCount.textContent=memories.length;
 elements.vectorCount.textContent=memories.filter(m=>m.importance>0.7).length;
 await loadGraphStats();
 }catch(error){console.error('Failed to load memories:',error);}
 }
+
 async function startNewSession(){
 userEmail=elements.userEmailInput.value.trim();
 if(!userEmail||!userEmail.includes('@')){showToast('올바른 이메일을 입력해주세요.','warning');return false;}
@@ -478,19 +1002,24 @@ console.log('New session started:',currentSessionId);
 await loadMemories();
 await loadHealthStatus();
 await loadHealthHistory();
+await loadRecentHistory();
+await loadStorageInfo();
+startAutoSave();
 const displayName=userName||userEmail.split('@')[0];
 addMessage('assistant','여보세요, '+displayName+'님! 잘 지내셨어요? 오늘 하루 어떠셨는지 얘기해 주세요.');
 return true;
 }catch(error){console.error('Session creation error:',error);showToast('세션 생성 실패','error');return false;}
 }
+
 async function endSession(){
 if(!currentSessionId||!userEmail){showToast('저장할 세션이 없습니다.','warning');return;}
 try{
 showToast('대화 내용을 저장하는 중...','success');
 const response=await fetch('/session/end',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({session_id:currentSessionId,user_email:userEmail})});
-if(response.ok){showToast('대화가 성공적으로 저장되었습니다!','success');await loadMemories();await loadHealthStatus();await loadHealthHistory();}
+if(response.ok){showToast('대화가 성공적으로 저장되었습니다!','success');await loadMemories();await loadHealthStatus();await loadHealthHistory();await loadRecentHistory();}
 }catch(error){console.error('Failed to end session:',error);showToast('저장 중 오류가 발생했습니다.','error');}
 }
+
 function showToast(message,type){
 const toast=document.getElementById('error-toast');
 toast.textContent=message;
@@ -498,11 +1027,18 @@ toast.className='toast '+type;
 toast.style.display='block';
 setTimeout(()=>{toast.style.display='none';},3000);
 }
+
 elements.textInput.addEventListener('keypress',(e)=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMessage();}});
 elements.sendButton.addEventListener('click',sendMessage);
 document.querySelectorAll('.quick-btn').forEach(btn=>{btn.addEventListener('click',()=>{const prompt=btn.dataset.prompt;if(prompt&&!isStreaming){elements.textInput.value=prompt;sendMessage();}});});
 elements.endSessionButton.addEventListener('click',endSession);
-window.addEventListener('DOMContentLoaded',()=>{initHealthChart();if(userEmail&&userEmail.includes('@')){startNewSession();}});
+elements.memorySearchInput.addEventListener('keypress',(e)=>{if(e.key==='Enter'){searchMemories();}});
+
+window.addEventListener('DOMContentLoaded',()=>{
+initHealthChart();
+loadStorageInfo();
+if(userEmail&&userEmail.includes('@')){startNewSession();}
+});
 </script>
 </body>
 </html>