@geminilight/mindos 0.6.71 → 0.6.73

package/browser-extension/src/popup/popup.css

@@ -1,510 +0,0 @@
-/* ── MindOS Web Clipper — Popup Styles ── */
-/* Design: warm amber accent, low-saturation grey, Warm Industrial aesthetic */
-
-:root {
-  --bg: #fafaf8;
-  --bg-card: #ffffff;
-  --bg-muted: #f3f2ef;
-  --bg-elevated: #ffffff;
-  --fg: #1a1a18;
-  --fg-secondary: #4a4944;
-  --fg-muted: #6b6a66;
-  --fg-hint: #9c9b96;
-  --border: #e5e4e0;
-  --border-subtle: #edece8;
-  --amber: #c8873a;
-  --amber-hover: #b5762f;
-  --amber-fg: #ffffff;
-  --amber-subtle: rgba(200, 135, 58, 0.08);
-  --amber-light: rgba(200, 135, 58, 0.15);
-  --amber-text: #a06b2c;
-  --success: #22a06b;
-  --success-subtle: rgba(34, 160, 107, 0.08);
-  --success-light: rgba(34, 160, 107, 0.12);
-  --error: #e34935;
-  --error-subtle: rgba(227, 73, 53, 0.08);
-  --radius: 10px;
-  --radius-sm: 6px;
-  --radius-xs: 4px;
-  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
-  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
-  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
-  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
-  --transition: 150ms var(--ease-out);
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #161614;
-    --bg-card: #1e1e1c;
-    --bg-muted: #262623;
-    --bg-elevated: #2a2a27;
-    --fg: #e8e7e3;
-    --fg-secondary: #c5c4c0;
-    --fg-muted: #9c9b96;
-    --fg-hint: #6b6a66;
-    --border: #333330;
-    --border-subtle: #2d2d2a;
-    --amber-hover: #d9954a;
-    --amber-subtle: rgba(200, 135, 58, 0.12);
-    --amber-light: rgba(200, 135, 58, 0.18);
-    --amber-text: #d9a45e;
-    --success-subtle: rgba(34, 160, 107, 0.12);
-    --success-light: rgba(34, 160, 107, 0.16);
-    --error: #f87171;
-    --error-subtle: rgba(248, 113, 113, 0.12);
-    --error-subtle: rgba(227, 73, 53, 0.12);
-    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
-    --shadow-md: 0 2px 8px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
-    --shadow-lg: 0 4px 16px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2);
-  }
-}
-
-/* Reset */
-*, *::before, *::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  width: 360px;
-  min-height: 200px;
-  max-height: 520px;
-  font-family: var(--font-sans);
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--fg);
-  background: var(--bg);
-  overflow-y: auto;
-  -webkit-font-smoothing: antialiased;
-}
-
-#app {
-  padding: 16px;
-}
-
-/* ── Views ── */
-
-.view {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  animation: fadeIn 200ms var(--ease-out);
-}
-.view[hidden] { display: none !important; }
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-/* ── Header ── */
-
-.header { display: flex; flex-direction: column; gap: 4px; }
-.header.compact {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 4px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.logo img { border-radius: var(--radius-xs); }
-.logo-text {
-  font-size: 14px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  color: var(--fg);
-}
-
-.subtitle {
-  font-size: 12px;
-  color: var(--fg-muted);
-  margin-top: 2px;
-}
-
-/* ── Buttons ── */
-
-.btn-primary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  width: 100%;
-  height: 40px;
-  border: none;
-  border-radius: var(--radius);
-  background: var(--amber);
-  color: var(--amber-fg);
-  font-family: var(--font-sans);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background var(--transition), box-shadow var(--transition), transform 100ms var(--ease-out);
-  box-shadow: var(--shadow-sm);
-}
-.btn-primary:hover { background: var(--amber-hover); box-shadow: var(--shadow-md); }
-.btn-primary:active { transform: scale(0.98); }
-.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
-.btn-primary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
-
-.btn-primary .btn-text,
-.btn-primary .btn-loading {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.btn-primary .btn-loading[hidden] { display: none; }
-
-.btn-secondary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 36px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: transparent;
-  color: var(--fg);
-  font-family: var(--font-sans);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background var(--transition), border-color var(--transition);
-}
-.btn-secondary:hover { background: var(--bg-muted); border-color: var(--fg-hint); }
-.btn-secondary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
-
-.btn-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--fg-hint);
-  cursor: pointer;
-  transition: color var(--transition), background var(--transition), border-color var(--transition);
-}
-.btn-icon:hover { color: var(--fg-muted); background: var(--bg-muted); border-color: var(--border); }
-.btn-icon:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
-
-/* ── Forms ── */
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.form-group label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--fg-muted);
-}
-
-.form-group input {
-  height: 38px;
-  padding: 0 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-card);
-  color: var(--fg);
-  font-family: var(--font-sans);
-  font-size: 13px;
-  transition: border-color var(--transition), box-shadow var(--transition);
-}
-.form-group input:focus-visible {
-  outline: none;
-  border-color: var(--amber);
-  box-shadow: 0 0 0 3px var(--amber-subtle);
-}
-.form-group input::placeholder { color: var(--fg-hint); }
-
-.hint {
-  font-size: 11px;
-  color: var(--fg-hint);
-}
-
-/* ── Clip Preview Card ── */
-
-.clip-preview {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 16px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--bg-card);
-  box-shadow: var(--shadow-sm);
-}
-
-.title-input {
-  border: none !important;
-  padding: 0 !important;
-  height: auto !important;
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.3;
-  color: var(--fg);
-  background: transparent;
-  outline: none;
-  box-shadow: none !important;
-}
-.title-input::placeholder { color: var(--fg-hint); }
-
-.meta-row {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.meta-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  font-size: 11px;
-  color: var(--fg-muted);
-  background: var(--bg-muted);
-  border-radius: 99px;
-  line-height: 1.4;
-}
-.meta-badge svg { flex-shrink: 0; }
-
-/* ── Error Bar ── */
-
-.error-bar {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: var(--radius-sm);
-  background: var(--error-subtle);
-  color: var(--error);
-  font-size: 12px;
-  line-height: 1.4;
-}
-.error-bar[hidden] { display: none; }
-
-/* ── Success View ── */
-
-.success-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 24px 16px 20px;
-  border-radius: var(--radius);
-  background: var(--success-subtle);
-  border: 1px solid var(--success-light);
-}
-
-.success-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: var(--success);
-  color: white;
-}
-
-.success-title {
-  font-size: 15px;
-  font-weight: 700;
-  color: var(--fg);
-}
-
-.success-detail {
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--fg-muted);
-  word-break: break-all;
-  text-align: center;
-  line-height: 1.4;
-  padding: 4px 8px;
-  border-radius: var(--radius-xs);
-  background: var(--bg-muted);
-  max-width: 100%;
-}
-
-.success-actions {
-  display: flex;
-  gap: 8px;
-  width: 100%;
-}
-.success-actions .btn-secondary { flex: 1; }
-
-/* ── Loading ── */
-
-.loading-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 40px 0;
-}
-
-.loading-brand {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.loading-brand img { border-radius: var(--radius-xs); }
-.loading-text {
-  color: var(--fg-muted);
-  font-size: 13px;
-}
-
-/* ── Spinner ── */
-
-.spinner {
-  width: 18px;
-  height: 18px;
-  animation: spin 0.9s var(--ease-in-out) infinite;
-  color: var(--amber);
-}
-.spinner.large { width: 28px; height: 28px; }
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* ── DirPicker ── */
-
-.dir-trigger {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  height: 38px;
-  padding: 0 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-card);
-  color: var(--fg);
-  font-family: var(--font-sans);
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-  transition: border-color var(--transition), box-shadow var(--transition);
-}
-.dir-trigger:hover { border-color: var(--fg-hint); }
-.dir-trigger:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-subtle); }
-.dir-trigger.active { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-subtle); }
-.dir-trigger .dir-icon { color: var(--amber); flex-shrink: 0; }
-.dir-trigger .dir-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dir-trigger .dir-chevron { flex-shrink: 0; color: var(--fg-hint); transition: transform var(--transition); }
-.dir-trigger.active .dir-chevron { transform: rotate(180deg); }
-
-.dir-panel {
-  border: 1px solid var(--amber);
-  border-radius: var(--radius-sm);
-  background: var(--bg-card);
-  overflow: hidden;
-  margin-top: 4px;
-  box-shadow: var(--shadow-md);
-  animation: slideDown 150ms var(--ease-out);
-}
-.dir-panel[hidden] { display: none; }
-
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.dir-breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 6px 10px;
-  background: var(--bg-muted);
-  border-bottom: 1px solid var(--border);
-  overflow-x: auto;
-  font-size: 11px;
-}
-.dir-breadcrumb button {
-  flex-shrink: 0;
-  padding: 2px 6px;
-  border: none;
-  border-radius: var(--radius-xs);
-  background: transparent;
-  color: var(--fg-muted);
-  font-family: var(--font-sans);
-  font-size: 11px;
-  cursor: pointer;
-  transition: color var(--transition), background var(--transition);
-}
-.dir-breadcrumb button:hover { color: var(--fg); background: var(--amber-subtle); }
-.dir-breadcrumb button.active { color: var(--amber); font-weight: 600; }
-.dir-breadcrumb .crumb-sep {
-  color: var(--fg-hint);
-  font-size: 9px;
-  flex-shrink: 0;
-}
-
-.dir-list {
-  max-height: 180px;
-  overflow-y: auto;
-}
-.dir-list:empty::after {
-  content: 'No subdirectories';
-  display: block;
-  padding: 12px;
-  text-align: center;
-  color: var(--fg-hint);
-  font-size: 11px;
-}
-
-.dir-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 10px;
-  border: none;
-  background: transparent;
-  color: var(--fg);
-  font-family: var(--font-sans);
-  font-size: 12px;
-  text-align: left;
-  cursor: pointer;
-  transition: background var(--transition);
-}
-.dir-item:hover { background: var(--amber-subtle); }
-.dir-item .dir-item-icon { color: var(--amber); flex-shrink: 0; }
-.dir-item .dir-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dir-item .dir-item-arrow { color: var(--fg-hint); flex-shrink: 0; }
-
-.dir-confirm {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 6px;
-  border: none;
-  border-top: 1px solid var(--border);
-  background: transparent;
-  color: var(--amber);
-  font-weight: 600;
-  font-size: 12px;
-  cursor: pointer;
-  transition: background var(--transition);
-}
-.dir-confirm:hover { background: var(--amber-subtle); }

package/browser-extension/src/popup/popup.html

@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=380, initial-scale=1.0">
-  <title>MindOS Web Clipper</title>
-  <link rel="stylesheet" href="popup.css">
-</head>
-<body>
-  <div id="app">
-    <!-- Setup View (first time) -->
-    <div id="view-setup" class="view" hidden>
-      <div class="header">
-        <div class="logo">
-          <img src="../icons/icon-32.png" alt="" width="24" height="24">
-          <span class="logo-text">MindOS</span>
-        </div>
-        <p class="subtitle">Connect to your knowledge base</p>
-      </div>
-
-      <div class="form-group">
-        <label for="setup-url">MindOS URL</label>
-        <input id="setup-url" type="url" value="http://localhost:3456" placeholder="http://localhost:3456" spellcheck="false" autocomplete="off">
-      </div>
-
-      <div class="form-group">
-        <label for="setup-token">Auth Token</label>
-        <input id="setup-token" type="password" placeholder="Paste your token here" spellcheck="false" autocomplete="off">
-        <p class="hint">Find it in MindOS Settings → MCP</p>
-      </div>
-
-      <div id="setup-error" class="error-bar" hidden></div>
-
-      <button id="btn-connect" class="btn-primary">
-        <span class="btn-text">Connect</span>
-        <span class="btn-loading" hidden>
-          <svg class="spinner" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="31 31" stroke-linecap="round"/></svg>
-          Connecting...
-        </span>
-      </button>
-    </div>
-
-    <!-- Clip View (main) -->
-    <div id="view-clip" class="view" hidden>
-      <div class="header compact">
-        <div class="logo">
-          <img src="../icons/icon-32.png" alt="" width="20" height="20">
-          <span class="logo-text">MindOS</span>
-        </div>
-        <button id="btn-settings" class="btn-icon" title="Settings" aria-label="Settings">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
-        </button>
-      </div>
-
-      <div class="clip-preview">
-        <input id="clip-title" type="text" class="title-input" placeholder="Page title" aria-label="Edit page title">
-        <div class="meta-row">
-          <span id="clip-site" class="meta-badge">
-            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
-            <span id="clip-site-text"></span>
-          </span>
-          <span id="clip-words" class="meta-badge">
-            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
-            <span id="clip-words-text"></span>
-          </span>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label>Save to</label>
-        <button id="dir-trigger" type="button" class="dir-trigger" aria-expanded="false" aria-controls="dir-panel">
-          <svg class="dir-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
-          <span id="dir-label" class="dir-label">Inbox</span>
-          <svg class="dir-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
-        </button>
-        <div id="dir-panel" class="dir-panel" hidden>
-          <div id="dir-breadcrumb" class="dir-breadcrumb"></div>
-          <div id="dir-list" class="dir-list" role="listbox" aria-label="Directory list"></div>
-          <button id="dir-confirm" type="button" class="dir-confirm" aria-label="Confirm directory selection">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
-          </button>
-        </div>
-      </div>
-
-      <div id="clip-error" class="error-bar" hidden></div>
-
-      <button id="btn-save" class="btn-primary">
-        <span class="btn-text">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m5 12 7-7 7 7"/></svg>
-          Save to MindOS
-        </span>
-        <span class="btn-loading" hidden>
-          <svg class="spinner" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="31 31" stroke-linecap="round"/></svg>
-          Saving...
-        </span>
-      </button>
-    </div>
-
-    <!-- Success View -->
-    <div id="view-success" class="view" hidden>
-      <div class="success-card">
-        <div class="success-icon" aria-hidden="true">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
-        </div>
-        <p class="success-title">Saved!</p>
-        <p id="success-detail" class="success-detail"></p>
-      </div>
-      <div class="success-actions">
-        <button id="btn-clip-another" class="btn-secondary">Clip Again</button>
-        <button id="btn-done" class="btn-secondary">Done</button>
-      </div>
-    </div>
-
-    <!-- Loading View (extracting) -->
-    <div id="view-loading" class="view" hidden>
-      <div class="loading-state">
-        <div class="loading-brand">
-          <img src="../icons/icon-32.png" alt="" width="24" height="24">
-        </div>
-        <svg class="spinner large" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="31 31" stroke-linecap="round"/></svg>
-        <p class="loading-text">Reading page content...</p>
-      </div>
-    </div>
-  </div>
-
-  <script type="module" src="popup.js"></script>
-</body>
-</html>