@agent-link/server 0.1.163 → 0.1.165

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-link/server",
-  "version": "0.1.163",
+  "version": "0.1.165",
   "description": "AgentLink relay server",
   "license": "MIT",
   "repository": {

package/web/app.js

@@ -1226,6 +1226,9 @@ const App = {
                 <span v-if="previewFile && !memoryEditing" class="file-preview-mobile-size">
                   {{ filePreview.formatFileSize(previewFile.totalSize) }}
                 </span>
+                <button v-if="previewFile && !memoryEditing" class="preview-refresh-btn" @click="filePreview.refreshPreview()" :title="t('sidebar.refresh')">
+                  <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+                </button>
               </div>
             </div>
             <div class="file-preview-mobile-filename" :title="previewFile?.filePath">
@@ -2513,6 +2516,9 @@ const App = {
             <span v-if="previewFile" class="preview-panel-size">
               {{ filePreview.formatFileSize(previewFile.totalSize) }}
             </span>
+            <button v-if="previewFile && !memoryEditing" class="preview-refresh-btn" @click="filePreview.refreshPreview()" :title="t('sidebar.refresh')">
+              <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+            </button>
             <button v-if="isMemoryPreview && previewFile && !memoryEditing"
                     class="preview-edit-btn" @click="startMemoryEdit()" :title="t('memory.edit')">
               <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/></svg>

package/web/css/ask-question.css

@@ -0,0 +1,321 @@
+/* ── AskUserQuestion interactive card ── */
+.ask-question-wrapper {
+  max-width: 100%;
+  padding-left: 0.25rem;
+  margin: 0.5rem 0;
+}
+
+.ask-question-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--accent);
+  border-radius: 10px;
+  padding: 0.8rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ask-question-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.ask-question-header {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--accent);
+}
+
+.ask-question-text {
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.ask-question-options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ask-question-option {
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.ask-question-option:hover {
+  border-color: var(--text-secondary);
+  background: var(--bg-tertiary);
+}
+
+.ask-question-option.selected {
+  border-color: var(--accent);
+  background: rgba(107, 159, 206, 0.12);
+}
+
+.ask-option-label {
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.ask-option-desc {
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  margin-top: 2px;
+  line-height: 1.4;
+}
+
+.ask-question-custom {
+  margin-top: 2px;
+}
+
+.ask-question-custom input {
+  width: 100%;
+  padding: 6px 10px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 0.85rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ask-question-custom input::placeholder {
+  color: var(--text-secondary);
+}
+
+.ask-question-custom input:focus {
+  border-color: var(--accent);
+}
+
+.ask-question-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ask-question-submit {
+  padding: 6px 20px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.ask-question-submit:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.ask-question-submit:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.ask-question-answered {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+}
+
+.ask-answered-icon {
+  color: var(--success);
+  font-size: 0.8rem;
+}
+
+.ask-answered-text {
+  font-style: italic;
+}
+
+.context-summary-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px dashed var(--border);
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.context-summary-bar:hover {
+  background: var(--bg-tertiary);
+}
+
+.context-summary-icon {
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.context-summary-label {
+  flex: 1;
+}
+
+.context-summary-toggle {
+  font-size: 0.72rem;
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+
+.context-summary-body {
+  margin-top: 6px;
+  padding: 0.6rem 0.8rem;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.context-summary-body .markdown-body {
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+}
+
+/* ── System message ── */
+.system-msg {
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+  font-style: italic;
+  padding: 0.25rem 0;
+}
+
+.system-msg.command-output-msg {
+  text-align: left;
+  font-style: normal;
+  font-size: 0.85rem;
+  padding: 0.5rem 0;
+}
+
+.system-msg.error-msg {
+  text-align: left;
+  font-style: normal;
+  color: #d45454;
+  background: rgba(212, 84, 84, 0.08);
+  border: 1px solid rgba(212, 84, 84, 0.2);
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  font-size: 0.85rem;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+/* ── History loading indicator ── */
+.history-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2rem 0;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.history-loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+/* ── Load more button ── */
+.load-more-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 0.75rem 0;
+}
+
+.load-more-btn {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.4rem 1.2rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.load-more-btn:hover {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+/* ── Typing indicator ── */
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0.5rem 0.9rem;
+}
+
+.typing-indicator span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-secondary);
+  animation: typing 1.2s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
+  30% { opacity: 1; transform: scale(1); }
+}
+
+/* ── Context compaction inline message ── */
+.compact-msg {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--warning) !important;
+  font-style: normal !important;
+  font-weight: 500;
+}
+
+.compact-inline-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(212, 162, 76, 0.3);
+  border-top-color: var(--warning);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+.compact-done-icon {
+  color: var(--success, #4ead6a);
+  font-weight: 700;
+  font-style: normal;
+}
+

package/web/css/base.css

@@ -0,0 +1,245 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Keyboard focus outlines (visible only for keyboard navigation) */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+:root {
+  --bg-primary: #1e1e1e;
+  --bg-secondary: #252525;
+  --bg-tertiary: #2f2f2f;
+  --text-primary: #d4d4d4;
+  --text-secondary: #858585;
+  --accent: #6b9fce;
+  --accent-hover: #5a8bba;
+  --success: #4ead6a;
+  --warning: #d4a24c;
+  --error: #d45454;
+  --border: #353535;
+  --code-bg: #1a1a1a;
+  --code-header-bg: #222222;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+}
+
+/* ── Light theme ── */
+[data-theme="light"] {
+  --bg-primary: #fefcf8;
+  --bg-secondary: #f5f3ef;
+  --bg-tertiary: #e8e6e1;
+  --text-primary: #1a1a1a;
+  --text-secondary: #4b5563;
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
+  --success: #16a34a;
+  --warning: #d97706;
+  --error: #dc2626;
+  --border: #d1d5db;
+  --code-bg: #f1f3f5;
+  --code-header-bg: #e9ecef;
+}
+
+html {
+  height: 100%;
+  height: 100dvh;
+}
+
+body {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  height: 100%;
+}
+
+#app {
+  height: 100%;
+}
+
+/* ── Layout ── */
+.layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.top-bar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sidebar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+}
+
+.top-bar h1 {
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.top-bar-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.agent-label {
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.latency {
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.7;
+}
+.latency.good { color: var(--success); }
+.latency.ok { color: var(--warning); }
+.latency.bad { color: var(--error); }
+
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+
+.theme-toggle:hover {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+  border-color: var(--text-secondary);
+}
+
+/* ── Center card (no session / waiting) ── */
+.center-card {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  min-height: 0;
+}
+
+.status-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 1.5rem 2rem;
+  min-width: 320px;
+  text-align: center;
+}
+
+.status-card .status {
+  font-size: 1.1rem;
+  margin-bottom: 0.75rem;
+}
+
+.status-card .info {
+  margin-bottom: 0.5rem;
+  font-size: 0.95rem;
+}
+
+.status-card .label {
+  color: var(--text-secondary);
+}
+
+/* ── Badges ── */
+.muted {
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.badge {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.badge.connected {
+  color: var(--success);
+  background: rgba(78, 173, 106, 0.1);
+}
+
+.badge.disconnected {
+  color: var(--error);
+  background: rgba(212, 84, 84, 0.1);
+}
+
+.badge.connecting\.\.\. {
+  color: var(--warning);
+  background: rgba(212, 162, 76, 0.1);
+}
+
+.badge.reconnecting\.\.\. {
+  color: var(--warning);
+  background: rgba(212, 162, 76, 0.1);
+}
+
+.badge.waiting {
+  color: var(--warning);
+  background: rgba(212, 162, 76, 0.1);
+}
+
+.badge.error,
+.badge.no\ session {
+  color: var(--error);
+  background: rgba(212, 84, 84, 0.1);
+}
+
+.error-msg {
+  color: var(--error);
+  font-size: 0.85rem;
+  margin-top: 0.75rem;
+}
+
+/* ── Main body (sidebar + chat) ── */
+.main-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+