Update Astra: v2.80.19 - Refactoring Sidebar, LM Studio integration, and new tests
This commit is contained in:
g1nation
@@ -0,0 +1,606 @@
|
||||
:root {
|
||||
--bg: #0d1117;
|
||||
--bg-secondary: #0d1117;
|
||||
--surface: #161b22;
|
||||
--border: #30363d;
|
||||
--border-bright: #484f58;
|
||||
--text-primary: #c9d1d9;
|
||||
--text-bright: #ffffff;
|
||||
--text-dim: #8b949e;
|
||||
--accent: #58a6ff;
|
||||
--accent-glow: rgba(88, 166, 255, 0.15);
|
||||
--success: #238636;
|
||||
--warning: #d29922;
|
||||
--error: #f85149;
|
||||
--code-bg: #161b22;
|
||||
--table-header-bg: #161b22;
|
||||
--table-row-hover: #21262d;
|
||||
--input-bg: #0d1117;
|
||||
--control-bg: #161b22;
|
||||
--control-bg-hover: #21262d;
|
||||
--control-active-bg: rgba(88, 166, 255, 0.14);
|
||||
--shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
body.vscode-light {
|
||||
--bg: #ffffff;
|
||||
--bg-secondary: #f6f8fa;
|
||||
--surface: #ffffff;
|
||||
--border: #d0d7de;
|
||||
--border-bright: #afb8c1;
|
||||
--text-primary: #24292f;
|
||||
--text-bright: #111118;
|
||||
--text-dim: #57606a;
|
||||
--accent: #0969da;
|
||||
--accent-glow: rgba(9, 105, 218, 0.1);
|
||||
--success: #1a7f37;
|
||||
--warning: #9a6700;
|
||||
--error: #cf222e;
|
||||
--code-bg: #f6f8fa;
|
||||
--table-header-bg: #f6f8fa;
|
||||
--table-row-hover: #f3f4f6;
|
||||
--input-bg: #ffffff;
|
||||
--control-bg: #ffffff;
|
||||
--control-bg-hover: #f6f8fa;
|
||||
--control-active-bg: rgba(9, 105, 218, 0.1);
|
||||
--shadow-soft: 0 8px 20px rgba(31, 35, 40, 0.08);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
background: var(--bg);
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* --- Header --- */
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 12px 6px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
padding: 0 12px 12px;
|
||||
}
|
||||
|
||||
.header-actions,
|
||||
.tool-group,
|
||||
.select-stack,
|
||||
.select-line,
|
||||
.status-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-actions { gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
|
||||
.tool-group {
|
||||
gap: 4px;
|
||||
padding: 3px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
.select-stack { flex-direction: column; gap: 6px; min-width: 0; }
|
||||
.select-line { gap: 6px; width: 100%; min-width: 0; }
|
||||
.paired-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.control-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.record-row {
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.brand { font-weight: 700; font-size: 14px; color: var(--text-bright); letter-spacing: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||||
.logo { width: 22px; height: 22px; background: var(--accent); color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; }
|
||||
|
||||
.status-pill {
|
||||
height: 28px;
|
||||
gap: 6px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--control-bg);
|
||||
color: var(--text-dim);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-dim);
|
||||
box-shadow: 0 0 0 2px rgba(139, 148, 158, 0.12);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-dot.ready {
|
||||
background: #3fb950;
|
||||
box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.16);
|
||||
}
|
||||
|
||||
.chat {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* --- Messages --- */
|
||||
.msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
animation: msgIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.msg-user {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.msg-ai {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
.msg-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 11px; color: var(--text-dim); }
|
||||
.msg-user .msg-head { flex-direction: row-reverse; }
|
||||
.av { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
|
||||
|
||||
/* Tooltip System */
|
||||
[data-tooltip] { position: relative; }
|
||||
[data-tooltip]::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
|
||||
background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;
|
||||
font-size: 10px; white-space: nowrap; opacity: 0; pointer-events: none;
|
||||
transition: all 0.2s ease; z-index: 100; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
[data-tooltip]:hover::after { opacity: 1; bottom: -35px; }
|
||||
|
||||
#input::placeholder { color: var(--accent); opacity: 0.6; font-weight: 500; }
|
||||
|
||||
|
||||
.msg-body {
|
||||
color: var(--text-primary);
|
||||
font-size: 13.5px;
|
||||
word-break: break-word;
|
||||
max-width: min(88%, 760px);
|
||||
}
|
||||
|
||||
.msg-user .msg-body {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 10px 14px;
|
||||
white-space: pre-wrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.msg-ai .msg-body {
|
||||
padding-left: 30px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* --- Markdown Style --- */
|
||||
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
|
||||
color: var(--text-bright);
|
||||
margin: 1.5em 0 0.8em;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.markdown-body h1 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; color: var(--accent); }
|
||||
.markdown-body h2 { font-size: 1.45em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
|
||||
.markdown-body h3 { font-size: 1.2em; }
|
||||
.markdown-body p { margin: 0.75em 0 1.1em; }
|
||||
.markdown-body ol, .markdown-body ul { margin: 0.7em 0 1.1em; padding-left: 1.45em; }
|
||||
.markdown-body li { margin: 0.35em 0 0.65em; }
|
||||
.markdown-body li + li { margin-top: 0.55em; }
|
||||
.markdown-body table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1.2em 0;
|
||||
font-size: 12px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.markdown-body th { background: var(--table-header-bg); color: var(--accent); font-weight: 600; text-align: left; padding: 10px 12px; border: 1px solid var(--border); }
|
||||
.markdown-body td { padding: 8px 12px; border: 1px solid var(--border); color: var(--text-primary); }
|
||||
.markdown-body tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
|
||||
|
||||
.markdown-body pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px; overflow-x: auto; margin: 12px 0; }
|
||||
.markdown-body code { font-family: 'SF Mono', monospace; font-size: 11.5px; background: rgba(175, 184, 193, 0.2); padding: 0.2em 0.4em; border-radius: 4px; }
|
||||
|
||||
/* --- UI Elements --- */
|
||||
.msg-actions {
|
||||
position: absolute; bottom: -12px; right: 0; display: flex; gap: 4px; opacity: 0; transition: 0.2s; z-index: 20;
|
||||
}
|
||||
.msg:hover .msg-actions { opacity: 1; }
|
||||
.action-btn {
|
||||
background: var(--bg-secondary); border: 1px solid var(--border);
|
||||
color: var(--text-dim); padding: 4px 10px; border-radius: 6px; font-size: 10px; cursor: pointer; transition: 0.2s;
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.action-btn:hover { color: var(--text-bright); border-color: var(--accent); background: var(--accent-glow); }
|
||||
|
||||
.icon-btn {
|
||||
background: var(--control-bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dim);
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
border-radius: 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.icon-btn:hover { color: var(--text-bright); border-color: var(--border-bright); background: var(--control-bg-hover); box-shadow: var(--shadow-soft); }
|
||||
.icon-btn.active { color: var(--accent); border-color: var(--accent); background: var(--control-active-bg); }
|
||||
|
||||
.select-wrap {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.select-wrap::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-right: 1.5px solid var(--text-dim);
|
||||
border-bottom: 1.5px solid var(--text-dim);
|
||||
transform: translateY(-65%) rotate(45deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
background: var(--control-bg);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0 28px 0 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
select:hover { border-color: var(--border-bright); background: var(--control-bg-hover); }
|
||||
select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
|
||||
|
||||
/* --- Input & Attachments --- */
|
||||
.input-wrap {
|
||||
padding: 12px 14px 16px; background: var(--bg); border-top: 1px solid var(--border); flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px;
|
||||
display: flex; flex-direction: column; gap: 8px; transition: 0.2s;
|
||||
position: relative; /* Toast 위치 앙커 */
|
||||
}
|
||||
.input-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
|
||||
|
||||
textarea {
|
||||
width: 100%; background: transparent; border: none; color: var(--text-bright);
|
||||
font-family: inherit; font-size: 13.5px; resize: none; outline: none; min-height: 24px; max-height: 160px;
|
||||
}
|
||||
|
||||
.attachment-preview {
|
||||
display: none; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
|
||||
}
|
||||
.attachment-preview.visible { display: flex; }
|
||||
|
||||
.file-chip {
|
||||
display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border);
|
||||
padding: 4px 8px; border-radius: 6px; font-size: 11px; color: var(--text-primary);
|
||||
}
|
||||
.file-chip .remove { cursor: pointer; color: var(--text-dim); }
|
||||
.file-chip .remove:hover { color: var(--error); }
|
||||
|
||||
.input-footer { display: flex; align-items: center; justify-content: space-between; }
|
||||
.footer-left { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
.send-btn {
|
||||
background: var(--accent); color: #fff; border: none; padding: 6px 14px; border-radius: 6px;
|
||||
font-weight: 600; font-size: 12px; cursor: pointer;
|
||||
}
|
||||
.send-btn:disabled { opacity: 0.3; cursor: not-allowed; }
|
||||
|
||||
.footer-right { display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
.cancel-btn {
|
||||
background: transparent; color: var(--text-dim); border: 1px solid var(--border);
|
||||
padding: 6px 10px; border-radius: 6px; font-weight: 600; font-size: 11px;
|
||||
cursor: pointer; align-items: center; gap: 4px; transition: all 0.15s ease;
|
||||
}
|
||||
.cancel-btn:hover { background: rgba(248, 81, 73, 0.12); color: var(--error); border-color: var(--error); }
|
||||
|
||||
.stop-btn {
|
||||
background: rgba(248, 81, 73, 0.15); color: var(--error); border: 1px solid var(--error);
|
||||
padding: 6px 14px; border-radius: 6px; font-weight: 700; font-size: 12px;
|
||||
cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
|
||||
animation: stopPulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
.stop-btn:hover { background: rgba(248, 81, 73, 0.3); }
|
||||
@keyframes stopPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(248,81,73,0.4); }
|
||||
50% { box-shadow: 0 0 0 5px rgba(248,81,73,0); }
|
||||
}
|
||||
|
||||
/* --- Drag and Drop Overlay --- */
|
||||
body.drag-over::after {
|
||||
content: '📂 파일을 여기에 놓으세요';
|
||||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(88, 166, 255, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
border: 2px dashed var(--accent);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--text-bright); font-size: 18px; font-weight: 700;
|
||||
z-index: 9999; pointer-events: none;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
|
||||
/* --- Toast Notification --- */
|
||||
.toast-notif {
|
||||
position: absolute; bottom: calc(100% + 8px); left: 50%;
|
||||
transform: translateX(-50%) translateY(4px);
|
||||
background: var(--surface); border: 1px solid var(--border-bright);
|
||||
color: var(--text-primary); font-size: 11px; font-weight: 600;
|
||||
padding: 7px 14px; border-radius: 20px; white-space: nowrap;
|
||||
opacity: 0; pointer-events: none;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
z-index: 500; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
||||
}
|
||||
.toast-notif.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
.toast-notif.toast-warn { border-color: var(--error); color: var(--error); background: rgba(248,81,73,0.08); }
|
||||
.toast-notif.toast-success { border-color: var(--success); color: var(--success); background: rgba(35,134,54,0.08); }
|
||||
|
||||
/* --- Overlays & Others --- */
|
||||
.thinking-bar { height: 2px; background: transparent; position: relative; overflow: hidden; margin-top: -1px; }
|
||||
.thinking-bar.active {
|
||||
display: block;
|
||||
background: linear-gradient(90deg, transparent, #2196f3, #bb86fc, transparent);
|
||||
background-size: 200% 100%;
|
||||
animation: thinking 1.5s infinite linear;
|
||||
}
|
||||
@keyframes thinking { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||||
|
||||
.history-overlay {
|
||||
position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8);
|
||||
backdrop-filter: blur(10px); z-index: 1000; display: none; flex-direction: column; padding: 20px;
|
||||
}
|
||||
.history-overlay.visible { display: flex; }
|
||||
|
||||
.stream-active::after {
|
||||
content: ''; display: inline-block; width: 6px; height: 14px; background: var(--accent);
|
||||
margin-left: 4px; animation: blink 0.8s step-end infinite; vertical-align: middle;
|
||||
}
|
||||
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
|
||||
|
||||
.welcome { text-align: center; padding: 40px 20px; color: var(--text-dim); }
|
||||
.welcome-logo { font-size: 48px; color: var(--accent); margin-bottom: 16px; opacity: 0.8; }
|
||||
.welcome-title { font-size: 20px; font-weight: 700; color: var(--text-bright); margin-bottom: 8px; }
|
||||
|
||||
/* --- History List --- */
|
||||
.history-item {
|
||||
padding: 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
|
||||
margin-bottom: 10px; cursor: pointer; transition: 0.2s;
|
||||
}
|
||||
.history-item:hover { border-color: var(--accent); background: var(--accent-glow); }
|
||||
|
||||
/* --- Approval UI --- */
|
||||
.approval-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin: 15px 0;
|
||||
padding: 16px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-bright);
|
||||
border-radius: 12px;
|
||||
animation: msgIn 0.3s ease-out;
|
||||
}
|
||||
.approval-title { font-weight: 700; color: var(--accent); font-size: 12px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
|
||||
.approval-btns { display: flex; gap: 10px; }
|
||||
.btn-approve { flex: 1; background: var(--success); color: white; border: none; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 12px; transition: 0.2s; }
|
||||
.btn-approve:hover { filter: brightness(1.1); transform: translateY(-1px); }
|
||||
.btn-reject { flex: 1; background: var(--error); color: white; border: none; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 12px; transition: 0.2s; }
|
||||
.btn-reject:hover { filter: brightness(1.1); transform: translateY(-1px); }
|
||||
|
||||
.panel {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
color: var(--text-dim);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.panel textarea {
|
||||
font-size: 11.5px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--input-bg);
|
||||
color: var(--text-bright);
|
||||
width: 100%;
|
||||
resize: vertical;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.panel textarea:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
height: 30px;
|
||||
background: var(--control-bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-primary);
|
||||
padding: 0 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.secondary-btn:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--control-active-bg);
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
/* --- Physics & Micro-interactions --- */
|
||||
button {
|
||||
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
button:active {
|
||||
transform: scale(0.96);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
/* --- Hierarchical Grouping --- */
|
||||
.input-group {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
margin-top: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* --- Storytelling Stepper --- */
|
||||
.stepper-container {
|
||||
display: none;
|
||||
margin: 12px 16px;
|
||||
padding: 12px;
|
||||
background: rgba(var(--accent-rgb), 0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.1);
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
.stepper-container.active { display: block; }
|
||||
.steps {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
.step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
.step-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-dim);
|
||||
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
.step.active .step-dot {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 12px var(--accent);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.step.complete .step-dot {
|
||||
background: var(--success);
|
||||
box-shadow: 0 0 8px var(--success);
|
||||
}
|
||||
.step-label {
|
||||
font-size: 9px;
|
||||
color: var(--text-dim);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.step.active .step-label { color: var(--accent); }
|
||||
.step.complete .step-label { color: var(--success); }
|
||||
|
||||
@media (min-width: 360px) {
|
||||
.header-controls {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.paired-row {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.header-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@keyframes slideIn {
|
||||
from { opacity: 0; transform: translateX(-10px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Astra</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<link rel="stylesheet" href="__STYLES_URI__">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="header-top">
|
||||
<div class="brand"><div class="logo">✦</div> Astra</div>
|
||||
<div class="header-actions">
|
||||
<button class="icon-btn" id="newChatBtn" data-tooltip="New Chat">New</button>
|
||||
<button class="icon-btn" id="saveWikiRawBtn" data-tooltip="Save Wiki Raw">Wiki</button>
|
||||
<button class="icon-btn active" id="brainTraceBtn" data-tooltip="Second Brain Trace Mode">Trace</button>
|
||||
<button class="icon-btn" id="brainTraceDebugBtn" data-tooltip="Second Brain Debug JSON">Dbg</button>
|
||||
<button class="icon-btn" id="internetBtn" data-tooltip="Internet Access">Web</button>
|
||||
<button class="icon-btn" id="historyBtn" data-tooltip="View History">Log</button>
|
||||
<button class="icon-btn" id="settingsBtn" data-tooltip="Settings">Set</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-controls">
|
||||
<div class="select-stack">
|
||||
<div class="select-line">
|
||||
<div class="status-pill"><span id="statusDot" class="status-dot"></span><span id="engineStatusText">Engine</span></div>
|
||||
<div class="select-wrap"><select id="modelSel" title="Select Model"></select></div>
|
||||
</div>
|
||||
<div class="paired-row">
|
||||
<div class="control-row">
|
||||
<div class="select-wrap"><select id="brainSel" title="Select Brain"></select></div>
|
||||
<div class="tool-group" aria-label="Brain actions">
|
||||
<button class="icon-btn" id="addBrainBtn" data-tooltip="Add Brain">Add</button>
|
||||
<button class="icon-btn" id="editBrainBtn" data-tooltip="Edit Brain">Edit</button>
|
||||
<button class="icon-btn" id="deleteBrainBtn" data-tooltip="Delete Brain">Del</button>
|
||||
<button class="icon-btn" id="brainBtn" data-tooltip="Sync Knowledge">Sync</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-row">
|
||||
<div class="select-wrap"><select id="agentSel" title="Select Agentic Skill"></select></div>
|
||||
<div class="tool-group" aria-label="Agent actions">
|
||||
<button class="icon-btn" id="addAgentBtn" data-tooltip="Create Agent">Add</button>
|
||||
<button class="icon-btn" id="editAgentBtn" data-tooltip="Edit Agent Skill">Edit</button>
|
||||
<button class="icon-btn" id="deleteAgentBtn" data-tooltip="Delete Agent Skill">Del</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-row">
|
||||
<div class="select-wrap"><select id="designerSel" title="Select Designer Project"></select></div>
|
||||
<div class="tool-group" aria-label="Designer actions">
|
||||
<button class="icon-btn" id="addDesignerBtn" data-tooltip="Create Designer Project">Add</button>
|
||||
<button class="icon-btn" id="openDesignerBtn" data-tooltip="Open Record Folder">Open</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-row record-row">
|
||||
<div class="status-pill" id="chronicleAutoStatus" title="Project records are saved automatically after meaningful project turns.">
|
||||
<span class="status-dot ready"></span><span>Auto Records</span>
|
||||
</div>
|
||||
<div class="select-wrap"><select id="chronicleRecordSel" title="Select Chronicle Record"></select></div>
|
||||
<div class="tool-group" aria-label="Chronicle record actions">
|
||||
<button class="icon-btn" id="refreshChronicleRecordsBtn" data-tooltip="Refresh Records">Ref</button>
|
||||
<button class="icon-btn" id="openChronicleRecordBtn" data-tooltip="Open Selected Record">Open</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="historyOverlay" class="history-overlay">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
|
||||
<h2 style="color:var(--text-bright);">Chat History</h2>
|
||||
<button class="icon-btn" id="closeHistoryBtn">✕</button>
|
||||
</div>
|
||||
<div id="historyList" style="flex:1; overflow-y:auto;"></div>
|
||||
</div>
|
||||
|
||||
<div class="thinking-bar" id="thinkingBar"></div>
|
||||
|
||||
<div id="stepper" class="stepper-container">
|
||||
<div class="steps">
|
||||
<div class="step" id="step-analyze"><div class="step-dot"></div><div class="step-label">Analyze</div></div>
|
||||
<div class="step" id="step-plan"><div class="step-dot"></div><div class="step-label">Plan</div></div>
|
||||
<div class="step" id="step-execute"><div class="step-dot"></div><div class="step-label">Execute</div></div>
|
||||
<div class="step" id="step-verify"><div class="step-dot"></div><div class="step-label">Verify</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat" id="chat">
|
||||
<div class="welcome">
|
||||
<div class="welcome-logo">✦</div>
|
||||
<div class="welcome-title">Welcome to Astra</div>
|
||||
<p>Your premium local AI assistant.<br>Ready to analyze projects and build reports.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-wrap">
|
||||
<div id="agentConfigPanel" class="panel">
|
||||
<div class="field-label">Agent Persona/Instructions</div>
|
||||
<textarea id="agentPrompt" rows="5" placeholder="Agent Persona & Instructions..."></textarea>
|
||||
|
||||
<div class="field-label">Negative Prompt (Strict Rules)</div>
|
||||
<textarea id="negativePrompt" rows="2" placeholder="What NOT to do..."></textarea>
|
||||
|
||||
<button id="updateAgentBtn" class="secondary-btn">Update Agent Skill</button>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<div id="attachPreview" class="attachment-preview"></div>
|
||||
<textarea id="input" rows="1" placeholder="Type your request..."></textarea>
|
||||
<div class="input-footer">
|
||||
<div class="footer-left">
|
||||
<button class="icon-btn" id="attachBtn" title="Attach Files">📎</button>
|
||||
<span id="statusLabel" style="font-size:10px; color:var(--text-dim);">Ready</span>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<button id="cancelBtn" class="cancel-btn" title="Clear draft" style="display:none;">✕ Clear</button>
|
||||
<button id="stopBtn" class="stop-btn" title="Stop generation" style="display:none;">■ Stop</button>
|
||||
<button id="sendBtn" class="send-btn">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toastNotif" class="toast-notif"></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button class="action-btn" style="flex:1" id="inputNewChatBtn">New Chat</button>
|
||||
<button class="action-btn" style="flex:1" id="inputSyncBtn">Sync Knowledge</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" id="fileInput" multiple hidden accept="image/*,.txt,.md,.pdf,.csv,.json,.js,.ts,.py,.java,.rs,.go">
|
||||
</div>
|
||||
|
||||
<script src="__SCRIPT_URI__"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,729 @@
|
||||
const vscode = acquireVsCodeApi();
|
||||
const chat = document.getElementById('chat');
|
||||
const input = document.getElementById('input');
|
||||
|
||||
// [State Persistence - Tier 0] 즉시 복원 (Instant Restore from WebView State)
|
||||
const previousState = vscode.getState();
|
||||
if (previousState && previousState.history && previousState.history.length > 0) {
|
||||
console.log('[Astra] Restoring from Webview State...');
|
||||
renderHistory(previousState.history);
|
||||
}
|
||||
|
||||
function saveWebviewState(history) {
|
||||
const current = vscode.getState() || {};
|
||||
vscode.setState({ ...current, history });
|
||||
}
|
||||
|
||||
function saveUiState() {
|
||||
const current = vscode.getState() || {};
|
||||
vscode.setState({ ...current, secondBrainTraceEnabled, secondBrainTraceDebug });
|
||||
}
|
||||
|
||||
function renderHistory(history) {
|
||||
if (!history || history.length === 0) return;
|
||||
chat.innerHTML = '';
|
||||
history.forEach(m => {
|
||||
if (!m) return;
|
||||
// Only skip truly internal system messages, keep assistant thoughts
|
||||
if (m.role === 'system' && m.internal) return;
|
||||
addMsg(m.content, m.role === 'assistant' ? 'assistant' : 'user', m.rationale);
|
||||
});
|
||||
chat.scrollTop = chat.scrollHeight;
|
||||
}
|
||||
const sendBtn = document.getElementById('sendBtn');
|
||||
const stopBtn = document.getElementById('stopBtn');
|
||||
const cancelBtn = document.getElementById('cancelBtn');
|
||||
const toastNotif = document.getElementById('toastNotif');
|
||||
const thinkingBar = document.getElementById('thinkingBar');
|
||||
const statusLabel = document.getElementById('statusLabel');
|
||||
const stepper = document.getElementById('stepper');
|
||||
|
||||
// --- Draft State Management ---
|
||||
let isDraftActive = false;
|
||||
let _toastTimer = null;
|
||||
|
||||
function showToast(msg, type = 'info') {
|
||||
toastNotif.textContent = msg;
|
||||
toastNotif.className = 'toast-notif toast-' + type + ' toast-visible';
|
||||
if (_toastTimer) clearTimeout(_toastTimer);
|
||||
_toastTimer = setTimeout(() => {
|
||||
toastNotif.classList.remove('toast-visible');
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
function setDraftActive(active) {
|
||||
isDraftActive = active;
|
||||
cancelBtn.style.display = active ? 'inline-flex' : 'none';
|
||||
}
|
||||
|
||||
// 생성 중/완료 시 Send ⇔ Stop 전환
|
||||
function setGenerating(generating) {
|
||||
if (generating) {
|
||||
sendBtn.style.display = 'none';
|
||||
stopBtn.style.display = 'inline-flex';
|
||||
// 생성 중에는 Clear 버튼 숨김
|
||||
cancelBtn.style.display = 'none';
|
||||
} else {
|
||||
stopBtn.style.display = 'none';
|
||||
sendBtn.style.display = 'inline-flex';
|
||||
sendBtn.disabled = false;
|
||||
// Draft 상태에 따라 Clear 버튼 복원
|
||||
if (isDraftActive) cancelBtn.style.display = 'inline-flex';
|
||||
}
|
||||
}
|
||||
|
||||
function clearDraft() {
|
||||
// Step 1: 상태 초기화 (Draft State Reset)
|
||||
setDraftActive(false);
|
||||
// Step 2: UI 반영 (Input + Attachments 초기화)
|
||||
input.value = '';
|
||||
input.style.height = 'auto';
|
||||
pendingFiles = [];
|
||||
renderAttachments();
|
||||
input.focus();
|
||||
// Step 3: Toast 알림으로 즉각적 피드백
|
||||
showToast('✕ 작성 내용이 초기화되었습니다.', 'warn');
|
||||
Sound.warn();
|
||||
}
|
||||
|
||||
|
||||
// --- Sound Manager ---
|
||||
const Sound = {
|
||||
ctx: null,
|
||||
init() { if (!this.ctx) this.ctx = new (window.AudioContext || window.webkitAudioContext)(); },
|
||||
play(freq, type, dur) {
|
||||
try {
|
||||
this.init();
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
osc.type = type;
|
||||
osc.frequency.setValueAtTime(freq, this.ctx.currentTime);
|
||||
gain.gain.setValueAtTime(0.05, this.ctx.currentTime);
|
||||
gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + dur);
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
osc.start();
|
||||
osc.stop(this.ctx.currentTime + dur);
|
||||
} catch(e) {}
|
||||
},
|
||||
success() { this.play(880, 'sine', 0.1); setTimeout(() => this.play(1109, 'sine', 0.15), 80); },
|
||||
warn() { this.play(440, 'triangle', 0.3); }
|
||||
};
|
||||
|
||||
function setStep(stepId, state = 'active') {
|
||||
stepper.classList.add('active');
|
||||
const step = document.getElementById('step-' + stepId);
|
||||
if (step) {
|
||||
if (state === 'active') {
|
||||
document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
|
||||
step.classList.add('active');
|
||||
} else if (state === 'complete') {
|
||||
step.classList.remove('active');
|
||||
step.classList.add('complete');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetStepper() {
|
||||
stepper.classList.remove('active');
|
||||
document.querySelectorAll('.step').forEach(s => {
|
||||
s.classList.remove('active');
|
||||
s.classList.remove('complete');
|
||||
});
|
||||
}
|
||||
const modelSel = document.getElementById('modelSel');
|
||||
const brainSel = document.getElementById('brainSel');
|
||||
const historyOverlay = document.getElementById('historyOverlay');
|
||||
const historyList = document.getElementById('historyList');
|
||||
const statusDot = document.getElementById('statusDot');
|
||||
const engineStatusText = document.getElementById('engineStatusText');
|
||||
const attachBtn = document.getElementById('attachBtn');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const attachPreview = document.getElementById('attachPreview');
|
||||
const agentSel = document.getElementById('agentSel');
|
||||
const designerSel = document.getElementById('designerSel');
|
||||
const chronicleRecordSel = document.getElementById('chronicleRecordSel');
|
||||
const editAgentBtn = document.getElementById('editAgentBtn');
|
||||
const addAgentBtn = document.getElementById('addAgentBtn');
|
||||
const deleteAgentBtn = document.getElementById('deleteAgentBtn');
|
||||
const addBrainBtn = document.getElementById('addBrainBtn');
|
||||
const editBrainBtn = document.getElementById('editBrainBtn');
|
||||
const deleteBrainBtn = document.getElementById('deleteBrainBtn');
|
||||
const saveWikiRawBtn = document.getElementById('saveWikiRawBtn');
|
||||
const agentConfigPanel = document.getElementById('agentConfigPanel');
|
||||
const agentPrompt = document.getElementById('agentPrompt');
|
||||
const negativePrompt = document.getElementById('negativePrompt');
|
||||
const updateAgentBtn = document.getElementById('updateAgentBtn');
|
||||
|
||||
let streamBody = null;
|
||||
let internetEnabled = false;
|
||||
let secondBrainTraceEnabled = true;
|
||||
let secondBrainTraceDebug = false;
|
||||
let pendingFiles = [];
|
||||
let editMode = false;
|
||||
if (previousState && typeof previousState.secondBrainTraceEnabled === 'boolean') {
|
||||
secondBrainTraceEnabled = previousState.secondBrainTraceEnabled;
|
||||
}
|
||||
if (previousState && typeof previousState.secondBrainTraceDebug === 'boolean') {
|
||||
secondBrainTraceDebug = previousState.secondBrainTraceDebug;
|
||||
}
|
||||
const initialTraceBtn = document.getElementById('brainTraceBtn');
|
||||
initialTraceBtn.classList.toggle('active', secondBrainTraceEnabled);
|
||||
initialTraceBtn.setAttribute('data-tooltip', secondBrainTraceEnabled ? 'Second Brain Trace Mode: On' : 'Second Brain Trace Mode: Off');
|
||||
const initialTraceDebugBtn = document.getElementById('brainTraceDebugBtn');
|
||||
initialTraceDebugBtn.classList.toggle('active', secondBrainTraceDebug);
|
||||
initialTraceDebugBtn.setAttribute('data-tooltip', secondBrainTraceDebug ? 'Second Brain Debug JSON: On' : 'Second Brain Debug JSON: Off');
|
||||
|
||||
function fmt(text) { return marked.parse(text || ''); }
|
||||
|
||||
function copyToClipboard(text, btn) {
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0';
|
||||
document.body.appendChild(textarea); textarea.select();
|
||||
try {
|
||||
if (document.execCommand('copy')) {
|
||||
btn.innerText = '✅ Copied!'; setTimeout(() => { btn.innerText = '📋 Copy'; }, 2000);
|
||||
}
|
||||
} catch (err) { console.error('Copy failed', err); }
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
|
||||
window.approve = () => {
|
||||
const box = document.querySelector('.approval-box');
|
||||
if (box) box.remove();
|
||||
vscode.postMessage({ type: 'approveAction' });
|
||||
};
|
||||
window.reject = () => {
|
||||
const box = document.querySelector('.approval-box');
|
||||
if (box) box.remove();
|
||||
vscode.postMessage({ type: 'rejectAction' });
|
||||
};
|
||||
|
||||
function exportToMD(text) {
|
||||
vscode.postMessage({ type: 'exportResponse', text: text });
|
||||
}
|
||||
|
||||
function addMsg(text, role, rationale) {
|
||||
const isUser = role === 'user';
|
||||
const msgEl = document.createElement('div');
|
||||
msgEl.className = 'msg ' + (isUser ? 'msg-user' : 'msg-ai');
|
||||
msgEl._raw = text;
|
||||
|
||||
const head = document.createElement('div');
|
||||
head.className = 'msg-head';
|
||||
head.innerHTML = isUser ? '<div class="av av-user">U</div> You' : '<div class="av av-ai">✦</div> Astra';
|
||||
|
||||
const body = document.createElement('div');
|
||||
body.className = 'msg-body markdown-body';
|
||||
|
||||
if (isUser) {
|
||||
body.innerText = text;
|
||||
} else {
|
||||
body.innerHTML = fmt(text);
|
||||
}
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'msg-actions';
|
||||
|
||||
const copyBtn = document.createElement('button');
|
||||
copyBtn.className = 'action-btn'; copyBtn.innerText = '📋 Copy';
|
||||
copyBtn.onclick = (e) => { e.stopPropagation(); copyToClipboard(msgEl._raw, copyBtn); };
|
||||
|
||||
const exportBtn = document.createElement('button');
|
||||
exportBtn.className = 'action-btn'; exportBtn.innerText = '💾 Export';
|
||||
exportBtn.onclick = (e) => { e.stopPropagation(); exportToMD(msgEl._raw); };
|
||||
|
||||
actions.appendChild(copyBtn);
|
||||
actions.appendChild(exportBtn);
|
||||
|
||||
msgEl.appendChild(head); msgEl.appendChild(body);
|
||||
msgEl.appendChild(actions);
|
||||
chat.appendChild(msgEl); chat.scrollTop = chat.scrollHeight;
|
||||
return { body, msgEl };
|
||||
}
|
||||
|
||||
window.addEventListener('message', e => {
|
||||
const msg = e.data;
|
||||
switch(msg.type) {
|
||||
case 'addMessage':
|
||||
addMsg(msg.value, msg.role, msg.rationale);
|
||||
// Update state for non-streamed messages
|
||||
const s = vscode.getState() || { history: [] };
|
||||
s.history.push({ role: msg.role === 'assistant' ? 'assistant' : 'user', content: msg.value, rationale: msg.rationale });
|
||||
saveWebviewState(s.history);
|
||||
break;
|
||||
case 'streamStart':
|
||||
thinkingBar.classList.remove('active');
|
||||
if (document.querySelector('.welcome')) document.querySelector('.welcome').remove();
|
||||
const res = addMsg('', 'assistant');
|
||||
streamBody = res.body; streamBody._parent = res.msgEl; streamBody._parent._raw = '';
|
||||
streamBody.classList.add('stream-active');
|
||||
break;
|
||||
case 'streamChunk':
|
||||
if (streamBody) {
|
||||
streamBody._parent._raw += msg.value;
|
||||
streamBody.innerHTML = fmt(streamBody._parent._raw);
|
||||
chat.scrollTop = chat.scrollHeight;
|
||||
}
|
||||
break;
|
||||
case 'streamEnd':
|
||||
if (streamBody) {
|
||||
streamBody.classList.remove('stream-active');
|
||||
// Update state after stream finishes
|
||||
const state = vscode.getState() || { history: [] };
|
||||
state.history.push({ role: 'assistant', content: streamBody._parent._raw });
|
||||
saveWebviewState(state.history);
|
||||
}
|
||||
streamBody = null;
|
||||
// 생성 완료 시 Stop 버튼 숨기고 Send 복구
|
||||
setGenerating(false);
|
||||
resetStepper();
|
||||
Sound.success();
|
||||
break;
|
||||
case 'restoreHistory':
|
||||
case 'sessionLoaded':
|
||||
const historyPayload = msg.type === 'sessionLoaded' ? msg.value : msg.value;
|
||||
const history = Array.isArray(historyPayload)
|
||||
? historyPayload
|
||||
: (Array.isArray(historyPayload?.history) ? historyPayload.history : []);
|
||||
|
||||
if (history && history.length > 0) {
|
||||
renderHistory(history);
|
||||
saveWebviewState(history);
|
||||
}
|
||||
if (historyPayload?.negativePrompt !== undefined) {
|
||||
negativePrompt.value = historyPayload.negativePrompt;
|
||||
}
|
||||
historyOverlay.classList.remove('visible');
|
||||
break;
|
||||
case 'clearChat':
|
||||
chat.innerHTML = '<div class="welcome"><div class="welcome-logo">✦</div><div class="welcome-title">Welcome to Astra</div><p>Your premium local AI assistant.<br>Ready to analyze projects and build reports.</p></div>';
|
||||
break;
|
||||
case 'focusInput':
|
||||
input.focus();
|
||||
break;
|
||||
case 'modelsList': {
|
||||
modelSel.innerHTML = '';
|
||||
// [State Persistence - Tier 2] LocalStorage에서 마지막 선택 모델 복원 시도
|
||||
const _savedModel = localStorage.getItem('g1nation_last_model');
|
||||
// 서버 추천 모델 vs 로컬 저장 모델 중 우선순위 결정
|
||||
// LocalStorage에 저장된 값이 현재 목록에 있으면 그것을 우선 사용 (Tier 2 우선)
|
||||
const _preferredModel = (_savedModel && msg.value.models.includes(_savedModel))
|
||||
? _savedModel
|
||||
: msg.value.selected;
|
||||
msg.value.models.forEach(m => {
|
||||
const o = document.createElement('option'); o.value = m; o.innerText = m;
|
||||
if (m === _preferredModel) o.selected = true;
|
||||
modelSel.appendChild(o);
|
||||
});
|
||||
// LocalStorage에 저장된 모델이 실제로 적용된 경우, 백엔드 설정도 동기화
|
||||
if (_savedModel && _savedModel !== msg.value.selected && msg.value.models.includes(_savedModel)) {
|
||||
vscode.postMessage({ type: 'model', value: _savedModel });
|
||||
}
|
||||
if (typeof updateInputPlaceholder === 'function') updateInputPlaceholder();
|
||||
statusLabel.innerText = `Model: ${_preferredModel}`;
|
||||
break;
|
||||
}
|
||||
case 'brainProfiles':
|
||||
brainSel.innerHTML = '';
|
||||
msg.value.profiles.forEach(p => {
|
||||
const o = document.createElement('option'); o.value = p.id; o.innerText = p.name;
|
||||
if (p.id === msg.value.activeBrainId) o.selected = true;
|
||||
brainSel.appendChild(o);
|
||||
});
|
||||
const addOpt = document.createElement('option');
|
||||
addOpt.value = 'new'; addOpt.innerText = '+ Add New Brain...';
|
||||
brainSel.appendChild(addOpt);
|
||||
break;
|
||||
case 'sessionList':
|
||||
historyList.innerHTML = '';
|
||||
msg.value.forEach(s => {
|
||||
const el = document.createElement('div'); el.className = 'history-item';
|
||||
el.setAttribute('role', 'button');
|
||||
el.tabIndex = 0;
|
||||
el.dataset.sessionId = s.id;
|
||||
el.innerHTML = `<div style="font-weight:600; color:var(--text-bright); margin-bottom:2px;">${s.title}</div><div style="font-size:10px; color:var(--text-dim)">${new Date(s.timestamp).toLocaleString()} · ${s.messageCount} msgs</div>`;
|
||||
const load = () => {
|
||||
if (!el.dataset.sessionId) return;
|
||||
vscode.postMessage({ type: 'loadSession', id: el.dataset.sessionId });
|
||||
};
|
||||
el.addEventListener('click', load);
|
||||
el.addEventListener('keydown', event => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
load();
|
||||
}
|
||||
});
|
||||
historyList.appendChild(el);
|
||||
});
|
||||
break;
|
||||
case 'engineStatus':
|
||||
statusDot.style.background = msg.value.online ? 'var(--success)' : 'var(--error)';
|
||||
engineStatusText.innerText = msg.value.online ? 'Online' : 'Offline';
|
||||
break;
|
||||
case 'autoContinue':
|
||||
statusLabel.innerText = msg.value; thinkingBar.classList.add('active');
|
||||
if (msg.value.includes('Analyzing')) setStep('analyze');
|
||||
if (msg.value.includes('Planning')) setStep('plan');
|
||||
if (msg.value.includes('Executing')) setStep('execute');
|
||||
setTimeout(() => { thinkingBar.classList.remove('active'); }, 3000);
|
||||
break;
|
||||
case 'agentsList':
|
||||
agentSel.innerHTML = '<option value="none">No Agent</option>';
|
||||
msg.value.forEach(a => {
|
||||
const o = document.createElement('option'); o.value = a.path; o.innerText = a.name;
|
||||
if (a.path === msg.selected) o.selected = true;
|
||||
agentSel.appendChild(o);
|
||||
});
|
||||
if (msg.selected && msg.selected !== 'none') {
|
||||
vscode.postMessage({ type: 'getAgentContent', path: msg.selected });
|
||||
}
|
||||
break;
|
||||
case 'chronicleProjects':
|
||||
designerSel.innerHTML = '';
|
||||
msg.value.projects.forEach(p => {
|
||||
const o = document.createElement('option');
|
||||
o.value = p.id;
|
||||
o.innerText = p.name;
|
||||
o.title = p.recordRoot;
|
||||
if (p.id === msg.value.activeProjectId) o.selected = true;
|
||||
designerSel.appendChild(o);
|
||||
});
|
||||
const newDesignerOpt = document.createElement('option');
|
||||
newDesignerOpt.value = 'new';
|
||||
newDesignerOpt.innerText = '+ Add Designer Project...';
|
||||
designerSel.appendChild(newDesignerOpt);
|
||||
vscode.postMessage({ type: 'getChronicleRecords' });
|
||||
break;
|
||||
case 'chronicleRecords':
|
||||
chronicleRecordSel.innerHTML = '';
|
||||
if (!msg.value || msg.value.length === 0) {
|
||||
const emptyRecordOpt = document.createElement('option');
|
||||
emptyRecordOpt.value = '';
|
||||
emptyRecordOpt.innerText = 'No records yet';
|
||||
chronicleRecordSel.appendChild(emptyRecordOpt);
|
||||
break;
|
||||
}
|
||||
msg.value.forEach(record => {
|
||||
const o = document.createElement('option');
|
||||
o.value = record.path;
|
||||
o.innerText = record.relativePath;
|
||||
o.title = record.path;
|
||||
chronicleRecordSel.appendChild(o);
|
||||
});
|
||||
break;
|
||||
case 'agentContent':
|
||||
agentPrompt.value = msg.value;
|
||||
negativePrompt.value = msg.negativePrompt || '';
|
||||
break;
|
||||
case 'agentDeleted':
|
||||
agentConfigPanel.style.display = 'none';
|
||||
editMode = false;
|
||||
editAgentBtn.classList.remove('active');
|
||||
agentPrompt.value = '';
|
||||
negativePrompt.value = '';
|
||||
break;
|
||||
case 'error':
|
||||
thinkingBar.classList.remove('active'); sendBtn.disabled = false;
|
||||
addMsg(msg.value, 'error');
|
||||
break;
|
||||
case 'lmStudioError':
|
||||
showToast('LM Studio: ' + msg.value, 'warn');
|
||||
break;
|
||||
case 'requiresApproval':
|
||||
const box = document.createElement('div');
|
||||
box.className = 'approval-box';
|
||||
box.innerHTML = '<div class="approval-title"><span>🛡️</span> 작업 승인 대기 중 (Action Approval Required)</div>' +
|
||||
'<div style="font-size: 11px; color: var(--text-dim); margin-bottom: 8px;">위의 변경 사항을 프로젝트에 반영할까요?</div>' +
|
||||
'<div class="approval-btns">' +
|
||||
' <button class="btn-approve" onclick="approve()">승인 (Approve)</button>' +
|
||||
' <button class="btn-reject" onclick="reject()">롤백 (Rollback)</button>' +
|
||||
'</div>';
|
||||
chat.appendChild(box);
|
||||
chat.scrollTop = chat.scrollHeight;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
function renderAttachments() {
|
||||
attachPreview.innerHTML = '';
|
||||
if (pendingFiles.length === 0) { attachPreview.classList.remove('visible'); return; }
|
||||
attachPreview.classList.add('visible');
|
||||
pendingFiles.forEach((f, i) => {
|
||||
const chip = document.createElement('div'); chip.className = 'file-chip';
|
||||
chip.innerHTML = `<span>📎</span> ${f.name} <span class="remove" onclick="removeFile(${i})">✕</span>`;
|
||||
attachPreview.appendChild(chip);
|
||||
});
|
||||
}
|
||||
window.removeFile = (i) => {
|
||||
pendingFiles.splice(i, 1);
|
||||
renderAttachments();
|
||||
// 파일 삭제 후 Draft State 재평가
|
||||
setDraftActive(input.value.trim().length > 0 || pendingFiles.length > 0);
|
||||
};
|
||||
function processFiles(files) {
|
||||
if (!files || files.length === 0) return;
|
||||
|
||||
Array.from(files).forEach(file => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const base64 = reader.result.split(',')[1];
|
||||
pendingFiles.push({ name: file.name, type: file.type, data: base64 });
|
||||
renderAttachments();
|
||||
setDraftActive(true);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
showToast(`${files.length}개의 파일이 추가되었습니다.`, 'success');
|
||||
Sound.success();
|
||||
}
|
||||
|
||||
attachBtn.onclick = () => fileInput.click();
|
||||
fileInput.onchange = () => {
|
||||
processFiles(fileInput.files);
|
||||
fileInput.value = '';
|
||||
};
|
||||
|
||||
// --- Drag and Drop Implementation ---
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
document.body.addEventListener(eventName, e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, false);
|
||||
});
|
||||
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
document.body.addEventListener(eventName, () => {
|
||||
document.body.classList.add('drag-over');
|
||||
}, false);
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
document.body.addEventListener(eventName, () => {
|
||||
document.body.classList.remove('drag-over');
|
||||
}, false);
|
||||
});
|
||||
|
||||
document.body.addEventListener('drop', e => {
|
||||
const dt = e.dataTransfer;
|
||||
const files = dt.files;
|
||||
|
||||
// ⭐ Kodari PD 가이드 반영: Input 요소의 상태를 드롭된 파일로 강제 동기화
|
||||
if (files && files.length > 0) {
|
||||
fileInput.files = files; // Input의 files 속성 업데이트
|
||||
console.log(`✅ [DnD] Input 상태 동기화 성공: ${files[0].name} 외 ${files.length - 1}개`);
|
||||
}
|
||||
|
||||
processFiles(files);
|
||||
}, false);
|
||||
|
||||
function send() {
|
||||
const val = input.value.trim();
|
||||
if (!val && pendingFiles.length === 0) return;
|
||||
addMsg(val || (pendingFiles.length > 0 ? `[Sent ${pendingFiles.length} files]` : ''), 'user');
|
||||
vscode.postMessage({
|
||||
type: 'prompt',
|
||||
value: val,
|
||||
model: modelSel.value,
|
||||
internet: internetEnabled,
|
||||
files: pendingFiles.length > 0 ? pendingFiles : undefined,
|
||||
agentFile: agentSel.value === 'none' ? undefined : agentSel.value,
|
||||
brainProfileId: brainSel.value && brainSel.value !== 'new' ? brainSel.value : undefined,
|
||||
negativePrompt: negativePrompt.value.trim() || undefined,
|
||||
secondBrainTrace: secondBrainTraceEnabled,
|
||||
secondBrainTraceDebug
|
||||
});
|
||||
input.value = ''; input.style.height = 'auto'; pendingFiles = []; renderAttachments();
|
||||
// 전송 완료 후 Draft State 리셋 + Stop 버튼 표시
|
||||
setDraftActive(false);
|
||||
setGenerating(true);
|
||||
thinkingBar.classList.add('active');
|
||||
|
||||
// Save state after sending
|
||||
const currentState = vscode.getState() || { history: [] };
|
||||
currentState.history.push({ role: 'user', content: val });
|
||||
saveWebviewState(currentState.history);
|
||||
}
|
||||
|
||||
sendBtn.onclick = send;
|
||||
input.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
if (e.isComposing) return;
|
||||
e.preventDefault();
|
||||
send();
|
||||
}
|
||||
});
|
||||
let _lastActivityBump = 0;
|
||||
const ACTIVITY_BUMP_INTERVAL_MS = 5000;
|
||||
const bumpActivity = () => {
|
||||
const now = Date.now();
|
||||
if (now - _lastActivityBump < ACTIVITY_BUMP_INTERVAL_MS) return;
|
||||
_lastActivityBump = now;
|
||||
vscode.postMessage({ type: 'activity' });
|
||||
};
|
||||
input.addEventListener('input', () => {
|
||||
input.style.height = 'auto';
|
||||
input.style.height = input.scrollHeight + 'px';
|
||||
// Draft State: 내용이 있으면 cancelBtn 표시
|
||||
setDraftActive(input.value.trim().length > 0 || pendingFiles.length > 0);
|
||||
bumpActivity();
|
||||
});
|
||||
|
||||
cancelBtn.onclick = () => clearDraft();
|
||||
stopBtn.onclick = () => {
|
||||
vscode.postMessage({ type: 'stopGeneration' });
|
||||
setGenerating(false);
|
||||
thinkingBar.classList.remove('active');
|
||||
showToast('■ 생성이 중단되었습니다.', 'warn');
|
||||
Sound.warn();
|
||||
};
|
||||
|
||||
const startNewChat = () => { Sound.play(660, 'sine', 0.1); vscode.postMessage({ type: 'newChat' }); };
|
||||
document.getElementById('newChatBtn').onclick = startNewChat;
|
||||
document.getElementById('inputNewChatBtn').onclick = startNewChat;
|
||||
|
||||
document.getElementById('settingsBtn').onclick = () => vscode.postMessage({ type: 'openSettings' });
|
||||
document.getElementById('internetBtn').onclick = () => {
|
||||
internetEnabled = !internetEnabled; document.getElementById('internetBtn').classList.toggle('active', internetEnabled);
|
||||
};
|
||||
document.getElementById('brainTraceBtn').onclick = () => {
|
||||
secondBrainTraceEnabled = !secondBrainTraceEnabled;
|
||||
const btn = document.getElementById('brainTraceBtn');
|
||||
btn.classList.toggle('active', secondBrainTraceEnabled);
|
||||
btn.setAttribute('data-tooltip', secondBrainTraceEnabled ? 'Second Brain Trace Mode: On' : 'Second Brain Trace Mode: Off');
|
||||
saveUiState();
|
||||
};
|
||||
document.getElementById('brainTraceDebugBtn').onclick = () => {
|
||||
secondBrainTraceDebug = !secondBrainTraceDebug;
|
||||
const btn = document.getElementById('brainTraceDebugBtn');
|
||||
btn.classList.toggle('active', secondBrainTraceDebug);
|
||||
btn.setAttribute('data-tooltip', secondBrainTraceDebug ? 'Second Brain Debug JSON: On' : 'Second Brain Debug JSON: Off');
|
||||
saveUiState();
|
||||
};
|
||||
|
||||
const syncBrain = () => { Sound.play(550, 'sine', 0.1); vscode.postMessage({ type: 'syncBrain' }); };
|
||||
document.getElementById('brainBtn').onclick = syncBrain;
|
||||
saveWikiRawBtn.onclick = () => vscode.postMessage({ type: 'saveWikiRaw' });
|
||||
addBrainBtn.onclick = () => vscode.postMessage({ type: 'addBrain' });
|
||||
editBrainBtn.onclick = () => {
|
||||
if (!brainSel.value || brainSel.value === 'new') return;
|
||||
vscode.postMessage({ type: 'editBrain', id: brainSel.value });
|
||||
};
|
||||
deleteBrainBtn.onclick = () => {
|
||||
if (!brainSel.value || brainSel.value === 'new') return;
|
||||
vscode.postMessage({ type: 'deleteBrain', id: brainSel.value });
|
||||
};
|
||||
document.getElementById('inputSyncBtn').onclick = syncBrain;
|
||||
document.getElementById('historyBtn').onclick = () => vscode.postMessage({ type: 'getSessions' });
|
||||
document.getElementById('historyBtn').addEventListener('click', () => historyOverlay.classList.add('visible'));
|
||||
document.getElementById('closeHistoryBtn').onclick = () => historyOverlay.classList.remove('visible');
|
||||
const updateInputPlaceholder = () => {
|
||||
if (typeof input !== 'undefined' && input) {
|
||||
input.placeholder = `Ask ${modelSel ? modelSel.value : 'AI'}...`;
|
||||
}
|
||||
};
|
||||
|
||||
modelSel.onchange = () => {
|
||||
const _selectedModel = modelSel.value;
|
||||
// [State Persistence - Tier 2] 모델 변경 시 LocalStorage에 즉시 저장 (클라이언트 측 지속성)
|
||||
try {
|
||||
localStorage.setItem('g1nation_last_model', _selectedModel);
|
||||
} catch(e) {
|
||||
console.warn('[Astra] LocalStorage 저장 실패:', e);
|
||||
}
|
||||
// [State Persistence - Tier 1] VS Code 전역 설정에 동기화 (영구 저장)
|
||||
vscode.postMessage({ type: 'model', value: _selectedModel });
|
||||
updateInputPlaceholder();
|
||||
// 상태 레이블 즉시 업데이트
|
||||
statusLabel.innerText = `Model: ${_selectedModel}`;
|
||||
};
|
||||
brainSel.onchange = () => {
|
||||
if (brainSel.value === 'new') {
|
||||
vscode.postMessage({ type: 'addBrain' });
|
||||
} else {
|
||||
vscode.postMessage({ type: 'setBrainProfile', id: brainSel.value });
|
||||
}
|
||||
};
|
||||
|
||||
designerSel.onchange = () => {
|
||||
if (designerSel.value === 'new') {
|
||||
vscode.postMessage({ type: 'createChronicleProject' });
|
||||
} else {
|
||||
vscode.postMessage({ type: 'setChronicleProject', id: designerSel.value });
|
||||
vscode.postMessage({ type: 'getChronicleRecords' });
|
||||
}
|
||||
};
|
||||
|
||||
agentSel.onchange = () => {
|
||||
if (agentSel.value !== 'none') {
|
||||
vscode.postMessage({ type: 'getAgentContent', path: agentSel.value });
|
||||
// [State Persistence Fix] 에이전트 선택값을 즉시 백엔드에 저장
|
||||
vscode.postMessage({ type: 'saveAgentSelection', path: agentSel.value });
|
||||
if (editMode) agentConfigPanel.style.display = 'flex';
|
||||
} else {
|
||||
agentConfigPanel.style.display = 'none';
|
||||
editMode = false;
|
||||
editAgentBtn.classList.remove('active');
|
||||
agentPrompt.value = '';
|
||||
negativePrompt.value = '';
|
||||
// [State Persistence Fix] 에이전트 해제도 즉시 저장
|
||||
vscode.postMessage({ type: 'saveAgentSelection', path: 'none' });
|
||||
}
|
||||
};
|
||||
|
||||
editAgentBtn.onclick = () => {
|
||||
if (agentSel.value === 'none') return;
|
||||
editMode = !editMode;
|
||||
editAgentBtn.classList.toggle('active', editMode);
|
||||
agentConfigPanel.style.display = editMode ? 'flex' : 'none';
|
||||
};
|
||||
|
||||
updateAgentBtn.onclick = () => {
|
||||
if (agentSel.value !== 'none') {
|
||||
vscode.postMessage({
|
||||
type: 'updateAgent',
|
||||
path: agentSel.value,
|
||||
content: agentPrompt.value,
|
||||
negativePrompt: negativePrompt.value.trim()
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
addAgentBtn.onclick = () => vscode.postMessage({ type: 'createAgent' });
|
||||
deleteAgentBtn.onclick = () => {
|
||||
if (agentSel.value === 'none') return;
|
||||
vscode.postMessage({ type: 'deleteAgent', path: agentSel.value });
|
||||
};
|
||||
|
||||
document.getElementById('addDesignerBtn').onclick = () => vscode.postMessage({ type: 'createChronicleProject' });
|
||||
document.getElementById('openDesignerBtn').onclick = () => vscode.postMessage({ type: 'openChronicleFolder' });
|
||||
document.getElementById('refreshChronicleRecordsBtn').onclick = () => vscode.postMessage({ type: 'getChronicleRecords' });
|
||||
document.getElementById('openChronicleRecordBtn').onclick = () => {
|
||||
if (!chronicleRecordSel.value) return;
|
||||
vscode.postMessage({ type: 'openChronicleRecord', path: chronicleRecordSel.value });
|
||||
};
|
||||
|
||||
vscode.postMessage({ type: 'getModels' });
|
||||
vscode.postMessage({ type: 'getAgents' });
|
||||
vscode.postMessage({ type: 'getChronicleProjects' });
|
||||
vscode.postMessage({ type: 'getChronicleRecords' });
|
||||
vscode.postMessage({ type: 'ready' });
|
||||
|
||||
// --- Proactive Behavioral Tracking ---
|
||||
let hoverTimer = null;
|
||||
const trackBehavior = (elementId, context) => {
|
||||
const el = document.getElementById(elementId);
|
||||
if (!el) return;
|
||||
el.addEventListener('mouseenter', () => {
|
||||
hoverTimer = setTimeout(() => {
|
||||
vscode.postMessage({ type: 'proactiveTrigger', context: context });
|
||||
}, 5000); // 5 seconds threshold
|
||||
});
|
||||
el.addEventListener('mouseleave', () => {
|
||||
if (hoverTimer) clearTimeout(hoverTimer);
|
||||
});
|
||||
};
|
||||
|
||||
trackBehavior('settingsBtn', 'settings_exploration');
|
||||
trackBehavior('brainBtn', 'brain_sync_exploration');
|
||||
trackBehavior('agentSel', 'agent_selection_exploration');
|
||||
Reference in New Issue
Block a user