@symbo.ls/connect 3.4.9 → 3.5.0

package/dist/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Symbols Connect",
-  "version": "3.4.8",
+  "version": "3.4.12",
   "description": "symbols.app connect — DOMQL Inspector and element grabber for the Symbols design system",
   "permissions": [
     "scripting",

package/dist/panel.css

@@ -2803,3 +2803,278 @@ body {
   padding-top: 8px;
   border-top: 1px solid var(--border);
 }
+
+/* ============================================================
+   Network mode
+   ============================================================ */
+#mode-network {
+  flex-direction: column;
+  overflow-y: auto;
+}
+.network-panel {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.network-section {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px;
+  background: var(--bg-alt);
+}
+.network-section .section-header {
+  margin-bottom: 10px;
+}
+.network-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-input);
+  font-size: 12px;
+  margin-bottom: 10px;
+}
+.network-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  flex-shrink: 0;
+}
+.network-status.connected .network-status-dot { background: #4caf50; }
+.network-status.error .network-status-dot { background: var(--error-color); }
+.network-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.network-field label {
+  display: block;
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-bottom: 3px;
+}
+.network-field-row {
+  display: flex;
+  gap: 6px;
+}
+.network-input {
+  flex: 1;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  color: var(--text-bright);
+  font-family: inherit;
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  outline: none;
+}
+.network-input:focus { border-color: var(--accent); }
+.network-btn-sm {
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.network-btn-sm:hover { border-color: var(--accent); color: var(--text-bright); }
+.network-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+.network-btn {
+  background: var(--accent);
+  border: none;
+  color: #fff;
+  font-size: 12px;
+  font-family: inherit;
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.network-btn:hover { opacity: 0.9; }
+.network-btn-secondary {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+}
+.network-btn-secondary:hover { border-color: var(--text-dim); color: var(--text); }
+.network-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.network-info-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 0;
+  font-size: 12px;
+  border-bottom: 1px solid var(--border);
+}
+.network-info-row:last-child { border-bottom: none; }
+.network-info-label {
+  color: var(--text-dim);
+}
+.network-info-value {
+  color: var(--text-bright);
+  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
+  font-size: 11px;
+}
+
+/* ============================================================
+   Integrations mode
+   ============================================================ */
+#mode-integrations {
+  flex-direction: column;
+  overflow-y: auto;
+}
+.integrations-panel {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.integrations-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.integrations-search-row {
+  margin-bottom: 4px;
+}
+.integrations-search {
+  width: 100%;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 12px;
+  font-family: inherit;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  outline: none;
+}
+.integrations-search:focus { border-color: var(--accent); }
+.integrations-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.integration-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-alt);
+}
+.integration-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-input);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+.integration-info {
+  flex: 1;
+  min-width: 0;
+}
+.integration-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-bright);
+}
+.integration-desc {
+  font-size: 10px;
+  color: var(--text-dim);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.integration-actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: 4px;
+}
+.integration-btn {
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 10px;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-family: inherit;
+}
+.integration-btn:hover { border-color: var(--accent); color: var(--text-bright); }
+.integration-btn-primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+.integration-btn-primary:hover { opacity: 0.9; }
+.integration-btn-danger {
+  color: var(--error-color);
+}
+.integration-btn-danger:hover { border-color: var(--error-color); }
+.integrations-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 8px;
+}
+.integration-card {
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-alt);
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.integration-card:hover { border-color: var(--accent); }
+.integration-card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.integration-card-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background: var(--bg-input);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+.integration-card-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-bright);
+}
+.integration-card-desc {
+  font-size: 10px;
+  color: var(--text-dim);
+  line-height: 1.4;
+}
+.integration-card-tag {
+  display: inline-block;
+  font-size: 9px;
+  color: var(--text-dim);
+  background: var(--bg-input);
+  padding: 1px 5px;
+  border-radius: 8px;
+  margin-top: 6px;
+}

package/dist/panel.html

@@ -72,6 +72,8 @@
       <button class="mode-tab" data-mode="chat">Chat</button>
       <button class="mode-tab" data-mode="gallery">Gallery</button>
       <button class="mode-tab" data-mode="content">Content</button>
+      <button class="mode-tab" data-mode="network">Network</button>
+      <button class="mode-tab" data-mode="integrations">Integrations</button>
       <span class="mode-tab-spacer"></span>
       <span id="app-connection-badge"></span>
       <button id="btn-app-disconnect" title="Disconnect">&#10005;</button>
@@ -167,6 +169,10 @@
           <select id="ai-model" class="ai-model-select" title="Select AI model">
             <option value="Starter">Starter (free)</option>
             <option value="claude">Claude</option>
+            <option value="openai">GPT-4o</option>
+            <option value="gemini">Gemini</option>
+            <option value="deepseek">DeepSeek</option>
+            <option value="groq">Groq</option>
             <option value="chrome">Chrome AI (local)</option>
           </select>
           <button class="ai-settings-btn" title="AI settings" data-settings="ai">&#9881;</button>
@@ -205,6 +211,10 @@
         <select id="chat-model" class="ai-model-select" title="Select AI model">
           <option value="Starter">Starter (free)</option>
           <option value="claude">Claude</option>
+          <option value="openai">GPT-4o</option>
+          <option value="gemini">Gemini</option>
+          <option value="deepseek">DeepSeek</option>
+          <option value="groq">Groq</option>
           <option value="chrome">Chrome AI (local)</option>
         </select>
         <button class="ai-settings-btn" title="AI settings" data-settings="ai">&#9881;</button>
@@ -239,6 +249,79 @@
       </div>
     </div>
 
+    <!-- ============================================================
+         NETWORK MODE
+         ============================================================ -->
+    <div id="mode-network" class="mode-panel">
+      <div class="network-panel">
+        <div class="network-section">
+          <div class="section-header">Backend Connection</div>
+          <div id="network-status" class="network-status">
+            <span class="network-status-dot"></span>
+            <span id="network-status-text">Not connected</span>
+          </div>
+          <div class="network-fields">
+            <div class="network-field">
+              <label>Server URL</label>
+              <div class="network-field-row">
+                <input id="network-url" type="text" placeholder="https://api.example.com" class="network-input" />
+                <button id="network-test" class="network-btn-sm">Test</button>
+              </div>
+            </div>
+            <div class="network-field">
+              <label>API Key / Token</label>
+              <input id="network-token" type="password" placeholder="Bearer token or API key" class="network-input" />
+            </div>
+          </div>
+          <div class="network-actions">
+            <button id="network-save" class="network-btn">Save Connection</button>
+            <button id="network-disconnect" class="network-btn network-btn-secondary">Disconnect</button>
+          </div>
+        </div>
+
+        <div class="network-section">
+          <div class="section-header">Server Info</div>
+          <div id="network-info" class="network-info">
+            <div class="network-info-row"><span class="network-info-label">Host</span><span id="network-info-host" class="network-info-value">—</span></div>
+            <div class="network-info-row"><span class="network-info-label">IP</span><span id="network-info-ip" class="network-info-value">—</span></div>
+            <div class="network-info-row"><span class="network-info-label">Status</span><span id="network-info-status" class="network-info-value">—</span></div>
+            <div class="network-info-row"><span class="network-info-label">Latency</span><span id="network-info-latency" class="network-info-value">—</span></div>
+            <div class="network-info-row"><span class="network-info-label">Platform</span><span id="network-info-platform" class="network-info-value">—</span></div>
+            <div class="network-info-row"><span class="network-info-label">Region</span><span id="network-info-region" class="network-info-value">—</span></div>
+          </div>
+        </div>
+
+        <div class="network-section">
+          <div class="section-header">Deployment</div>
+          <div id="network-deployment" class="network-info">
+            <div class="empty-message">Connect to view deployment configuration</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ============================================================
+         INTEGRATIONS MODE
+         ============================================================ -->
+    <div id="mode-integrations" class="mode-panel">
+      <div class="integrations-panel">
+        <div class="integrations-section">
+          <div class="section-header">Active Integrations</div>
+          <div id="integrations-active" class="integrations-list">
+            <div class="empty-message">No integrations enabled</div>
+          </div>
+        </div>
+
+        <div class="integrations-section">
+          <div class="section-header">Marketplace</div>
+          <div class="integrations-search-row">
+            <input id="integrations-search" type="text" placeholder="Search integrations..." class="integrations-search" />
+          </div>
+          <div id="integrations-marketplace" class="integrations-grid"></div>
+        </div>
+      </div>
+    </div>
+
   </div>
 
   <!-- AI Settings Dialog -->
@@ -249,15 +332,45 @@
         <button id="ai-dialog-close">&times;</button>
       </div>
       <div class="ai-dialog-body">
+        <div id="ai-dialog-auth-status" class="ai-dialog-auth-status"></div>
+
         <div class="ai-dialog-section">
-          <div class="ai-dialog-label">Claude API</div>
-          <p class="ai-dialog-hint">Sign in to symbols.app to use Claude via the platform, or enter your own Anthropic API key.</p>
-          <div id="ai-dialog-auth-status" class="ai-dialog-auth-status"></div>
           <div class="ai-dialog-field">
-            <label>Anthropic API Key</label>
+            <label>Anthropic (Claude)</label>
             <input id="ai-key-anthropic" type="password" placeholder="sk-ant-..." class="ai-dialog-input" />
           </div>
         </div>
+
+        <div class="ai-dialog-section">
+          <div class="ai-dialog-field">
+            <label>OpenAI (GPT-4o)</label>
+            <input id="ai-key-openai" type="password" placeholder="sk-..." class="ai-dialog-input" />
+          </div>
+        </div>
+
+        <div class="ai-dialog-section">
+          <div class="ai-dialog-field">
+            <label>Google AI (Gemini)</label>
+            <input id="ai-key-gemini" type="password" placeholder="AIza..." class="ai-dialog-input" />
+          </div>
+        </div>
+
+        <div class="ai-dialog-section">
+          <div class="ai-dialog-field">
+            <label>DeepSeek</label>
+            <input id="ai-key-deepseek" type="password" placeholder="sk-..." class="ai-dialog-input" />
+          </div>
+        </div>
+
+        <div class="ai-dialog-section">
+          <div class="ai-dialog-field">
+            <label>Groq</label>
+            <input id="ai-key-groq" type="password" placeholder="gsk_..." class="ai-dialog-input" />
+          </div>
+        </div>
+
+        <p class="ai-dialog-hint">Sign in to symbols.app for free Claude access, or enter API keys above.</p>
+
         <div class="ai-dialog-actions">
           <button id="ai-dialog-save" class="ai-dialog-save">Save</button>
         </div>