tjs-lang 0.2.0

package/demo/src/settings.ts

@@ -0,0 +1,440 @@
+/*
+ * settings.ts - Settings dialog for API keys and preferences
+ */
+
+import { elements, vars, Component, StyleSheet } from 'tosijs'
+
+import { icons } from 'tosijs-ui'
+
+import {
+  rescanLocalModels,
+  checkServerLoad,
+  getPendingRequests,
+} from './capabilities'
+
+const { div, button, span, label, input, h2, p, select, option } = elements
+
+// Settings dialog styles
+StyleSheet('settings-styles', {
+  '.settings-overlay': {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: 'rgba(0, 0, 0, 0.5)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000,
+  },
+
+  '.settings-dialog': {
+    background: vars.background,
+    borderRadius: vars.borderRadius,
+    padding: vars.spacing200,
+    maxWidth: '500px',
+    width: '90%',
+    maxHeight: '80vh',
+    overflow: 'auto',
+    boxShadow: '0 10px 40px rgba(0, 0, 0, 0.3)',
+  },
+
+  '.settings-header': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: vars.spacing,
+  },
+
+  '.settings-header h2': {
+    margin: 0,
+    fontSize: '1.25em',
+  },
+
+  '.settings-section': {
+    marginBottom: vars.spacing200,
+  },
+
+  '.settings-section h3': {
+    fontSize: '1em',
+    marginBottom: vars.spacing,
+    color: vars.brandColor,
+  },
+
+  '.settings-field': {
+    marginBottom: vars.spacing,
+  },
+
+  '.settings-field label': {
+    display: 'block',
+    marginBottom: '4px',
+    fontSize: '0.9em',
+    fontWeight: 500,
+  },
+
+  '.settings-field input': {
+    width: '100%',
+    padding: '8px 12px',
+    border: `1px solid ${vars.codeBorder}`,
+    borderRadius: vars.borderRadius,
+    background: vars.background,
+    color: vars.textColor,
+    fontSize: 'inherit',
+  },
+
+  '.settings-field input:focus': {
+    outline: 'none',
+    borderColor: vars.brandColor,
+    boxShadow: `0 0 0 2px rgba(99, 102, 241, 0.2)`,
+  },
+
+  '.settings-field .hint': {
+    fontSize: '0.8em',
+    color: vars.textColor,
+    opacity: 0.7,
+    marginTop: '4px',
+  },
+
+  '.settings-actions': {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: vars.spacing,
+    marginTop: vars.spacing200,
+    paddingTop: vars.spacing,
+    borderTop: `1px solid ${vars.codeBorder}`,
+  },
+
+  '.settings-btn': {
+    padding: '8px 16px',
+    borderRadius: vars.borderRadius,
+    border: 'none',
+    cursor: 'pointer',
+    fontWeight: 500,
+  },
+
+  '.settings-btn.primary': {
+    background: vars.brandColor,
+    color: 'white',
+  },
+
+  '.settings-btn.secondary': {
+    background: vars.codeBackground,
+    color: vars.textColor,
+  },
+})
+
+export type LLMProvider =
+  | 'auto'
+  | 'custom'
+  | 'openai'
+  | 'anthropic'
+  | 'deepseek'
+
+export interface SettingsData {
+  preferredProvider: LLMProvider
+  openaiKey: string
+  anthropicKey: string
+  deepseekKey: string
+  customLlmUrl: string
+}
+
+export function showSettingsDialog(
+  currentSettings: SettingsData,
+  onSave: (settings: SettingsData) => void
+): void {
+  const overlay = div({ class: 'settings-overlay' })
+
+  const providerSelect = select(
+    { style: { width: '100%', padding: '8px 12px', borderRadius: '6px' } },
+    option(
+      { value: 'auto', selected: currentSettings.preferredProvider === 'auto' },
+      'First Available'
+    ),
+    option(
+      {
+        value: 'custom',
+        selected: currentSettings.preferredProvider === 'custom',
+      },
+      'Custom Endpoint (LM Studio, Ollama)'
+    ),
+    option(
+      {
+        value: 'openai',
+        selected: currentSettings.preferredProvider === 'openai',
+      },
+      'OpenAI'
+    ),
+    option(
+      {
+        value: 'anthropic',
+        selected: currentSettings.preferredProvider === 'anthropic',
+      },
+      'Anthropic'
+    ),
+    option(
+      {
+        value: 'deepseek',
+        selected: currentSettings.preferredProvider === 'deepseek',
+      },
+      'Deepseek'
+    )
+  )
+
+  const openaiInput = input({
+    type: 'password',
+    placeholder: 'sk-...',
+    value: currentSettings.openaiKey,
+    autocomplete: 'off',
+  })
+
+  const anthropicInput = input({
+    type: 'password',
+    placeholder: 'sk-ant-...',
+    value: currentSettings.anthropicKey,
+    autocomplete: 'off',
+  })
+
+  const deepseekInput = input({
+    type: 'password',
+    placeholder: 'sk-...',
+    value: currentSettings.deepseekKey,
+    autocomplete: 'off',
+  })
+
+  const customUrlInput = input({
+    type: 'url',
+    placeholder: 'http://localhost:1234/v1',
+    value: currentSettings.customLlmUrl,
+  })
+
+  const close = () => {
+    overlay.remove()
+  }
+
+  const save = () => {
+    onSave({
+      preferredProvider: (providerSelect as HTMLSelectElement)
+        .value as LLMProvider,
+      openaiKey: (openaiInput as HTMLInputElement).value,
+      anthropicKey: (anthropicInput as HTMLInputElement).value,
+      deepseekKey: (deepseekInput as HTMLInputElement).value,
+      customLlmUrl: (customUrlInput as HTMLInputElement).value,
+    })
+    close()
+  }
+
+  overlay.append(
+    div(
+      { class: 'settings-dialog' },
+      // Header
+      div(
+        { class: 'settings-header' },
+        h2('Settings'),
+        button(
+          {
+            class: 'iconic',
+            onClick: close,
+          },
+          icons.x()
+        )
+      ),
+
+      // LLM API Keys section
+      div(
+        { class: 'settings-section' },
+        div(
+          { style: { fontWeight: 600, marginBottom: '10px' } },
+          'LLM Settings'
+        ),
+        p(
+          { style: { fontSize: '0.85em', opacity: 0.8, marginBottom: '15px' } },
+          'API keys are stored locally in your browser and never sent to any server except the respective API provider.'
+        ),
+
+        div(
+          { class: 'settings-field' },
+          label('Preferred Provider'),
+          providerSelect,
+          div(
+            { class: 'hint' },
+            '"First Available" uses the first configured provider in order below'
+          )
+        ),
+
+        div(
+          { class: 'settings-field' },
+          label('Custom LLM Endpoint'),
+          customUrlInput,
+          div(
+            { class: 'hint' },
+            'OpenAI-compatible endpoint (e.g., LM Studio, Ollama). ',
+            window.location.protocol === 'https:'
+              ? span(
+                  { style: { color: '#dc2626' } },
+                  'Note: Local endpoints require HTTP.'
+                )
+              : ''
+          ),
+          div(
+            {
+              style: {
+                marginTop: '8px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                flexWrap: 'wrap',
+              },
+            },
+            button(
+              {
+                class: 'settings-btn secondary',
+                style: { padding: '4px 10px', fontSize: '0.85em' },
+                onClick: async (e: Event) => {
+                  const btn = e.target as HTMLButtonElement
+                  const container = btn.parentElement as HTMLElement
+                  const statusEl = container.querySelector(
+                    '.status-text'
+                  ) as HTMLElement
+                  btn.disabled = true
+                  btn.textContent = 'Scanning...'
+                  statusEl.textContent = ''
+
+                  const url = (customUrlInput as HTMLInputElement).value
+                  const models = await rescanLocalModels(url)
+
+                  btn.disabled = false
+                  btn.textContent = 'Rescan Models'
+
+                  if (models.length > 0) {
+                    const visionModels = models.filter(
+                      (m) =>
+                        m.includes('-vl') ||
+                        m.includes('vl-') ||
+                        m.includes('vision') ||
+                        m.includes('llava') ||
+                        m.includes('gemma-3') ||
+                        m.includes('gemma3')
+                    )
+                    statusEl.textContent =
+                      `Found ${models.length} model(s)` +
+                      (visionModels.length > 0
+                        ? ` (${visionModels.length} vision)`
+                        : '')
+                    statusEl.style.color = '#16a34a'
+                  } else {
+                    statusEl.textContent = 'No models found'
+                    statusEl.style.color = '#dc2626'
+                  }
+                },
+              },
+              'Rescan Models'
+            ),
+            button(
+              {
+                class: 'settings-btn secondary',
+                style: { padding: '4px 10px', fontSize: '0.85em' },
+                onClick: async (e: Event) => {
+                  const btn = e.target as HTMLButtonElement
+                  const container = btn.parentElement as HTMLElement
+                  const statusEl = container.querySelector(
+                    '.status-text'
+                  ) as HTMLElement
+                  btn.disabled = true
+                  btn.textContent = 'Checking...'
+
+                  const url = (customUrlInput as HTMLInputElement).value
+                  if (!url) {
+                    statusEl.textContent = 'No URL configured'
+                    statusEl.style.color = '#dc2626'
+                    btn.disabled = false
+                    btn.textContent = 'Check Status'
+                    return
+                  }
+
+                  const isResponsive = await checkServerLoad(url)
+                  const pending = getPendingRequests(url)
+
+                  btn.disabled = false
+                  btn.textContent = 'Check Status'
+
+                  if (isResponsive) {
+                    statusEl.textContent =
+                      pending > 0 ? `Ready (${pending} pending)` : 'Ready'
+                    statusEl.style.color = '#16a34a'
+                  } else {
+                    statusEl.textContent =
+                      pending > 0
+                        ? `Under load (${pending} pending)`
+                        : 'Under load or unreachable'
+                    statusEl.style.color = '#f59e0b'
+                  }
+                },
+              },
+              'Check Status'
+            ),
+            span({ class: 'status-text', style: { fontSize: '0.85em' } }, '')
+          )
+        ),
+
+        div(
+          { class: 'settings-field' },
+          label('OpenAI API Key'),
+          openaiInput,
+          div({ class: 'hint' }, 'For GPT-4, GPT-3.5, etc.')
+        ),
+
+        div(
+          { class: 'settings-field' },
+          label('Anthropic API Key'),
+          anthropicInput,
+          div({ class: 'hint' }, 'For Claude models')
+        ),
+
+        div(
+          { class: 'settings-field' },
+          label('Deepseek API Key'),
+          deepseekInput,
+          div({ class: 'hint' }, 'For Deepseek models (cheap & capable)')
+        )
+      ),
+
+      // Actions
+      div(
+        { class: 'settings-actions' },
+        button(
+          {
+            class: 'settings-btn secondary',
+            onClick: close,
+          },
+          'Cancel'
+        ),
+        button(
+          {
+            class: 'settings-btn primary',
+            onClick: save,
+          },
+          'Save'
+        )
+      )
+    )
+  )
+
+  // Close on overlay click
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) {
+      close()
+    }
+  })
+
+  // Close on Escape
+  const handleEscape = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      close()
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }
+  document.addEventListener('keydown', handleEscape)
+
+  document.body.append(overlay)
+}

package/demo/src/style.ts

@@ -0,0 +1,280 @@
+/*
+ * style.ts - CSS styles for agent-99 demo site
+ *
+ * Uses tosijs StyleSheet with CSS variables for theming.
+ */
+
+import { vars } from 'tosijs'
+
+// Brand colors
+const brandColor = '#3d4a6b' // Dark muted blue
+const brandTextColor = '#ffffff'
+
+// Extend CSS variables
+export const styleSpec = {
+  ':root': {
+    _brandColor: brandColor,
+    _brandTextColor: brandTextColor,
+    _headerHeight: '50px',
+    _sidebarWidth: '220px',
+    _spacing: '10px',
+    _spacing50: '5px',
+    _spacing200: '20px',
+    _borderRadius: '6px',
+    _fontMono: "'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace",
+    _fontSize: '15px',
+    _lineHeight: '1.6',
+    _xinTabsSelectedColor: vars.brandColor,
+    // Light mode colors
+    _background: '#ffffff',
+    _textColor: '#1f2937',
+    _codeBackground: '#f3f4f6',
+    _codeBorder: '#e5e7eb',
+    _linkColor: brandColor,
+  },
+
+  // Dark mode - explicit colors for better control
+  '.darkmode': {
+    _background: '#111827',
+    _textColor: '#f3f4f6',
+    _codeBackground: '#1f2937',
+    _codeBorder: '#374151',
+    _linkColor: '#818cf8',
+    // xin-tabs uses these
+    _xinTabsBarColor: '#374151',
+  },
+
+  // High contrast mode - uses filter for comprehensive contrast boost
+  '.high-contrast': {
+    filter: 'contrast(1.4)',
+  },
+
+  // Base styles
+  'html, body': {
+    margin: 0,
+    padding: 0,
+    height: '100%',
+    fontFamily:
+      "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    fontSize: vars.fontSize,
+    lineHeight: vars.lineHeight,
+    background: vars.background,
+    color: vars.textColor,
+  },
+
+  body: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+
+  main: {
+    flex: '1',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+  },
+
+  // Header
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    height: vars.headerHeight,
+    padding: `0 ${vars.spacing}`,
+    background: vars.brandColor,
+    color: vars.brandTextColor,
+    gap: vars.spacing,
+    flexShrink: 0,
+  },
+
+  'header h1': {
+    margin: 0,
+    fontSize: '1.25em',
+    fontWeight: 600,
+  },
+
+  'header a': {
+    color: vars.brandTextColor,
+    textDecoration: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    gap: vars.spacing50,
+  },
+
+  'header .elastic': {
+    flex: '1 1 auto',
+  },
+
+  // Icon buttons
+  '.iconic': {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: vars.spacing50,
+    borderRadius: vars.borderRadius,
+    color: 'inherit',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'background 0.15s',
+  },
+
+  '.iconic:hover': {
+    background: 'rgba(255, 255, 255, 0.15)',
+  },
+
+  // Links
+  a: {
+    color: vars.linkColor,
+    textDecoration: 'none',
+  },
+
+  'a:hover': {
+    textDecoration: 'underline',
+  },
+
+  // Doc links in sidebar
+  '.doc-link': {
+    display: 'block',
+    padding: `${vars.spacing50} ${vars.spacing}`,
+    color: vars.textColor,
+    borderRadius: vars.borderRadius,
+    textDecoration: 'none',
+    transition: 'background 0.15s',
+  },
+
+  '.doc-link:hover': {
+    background: 'rgba(99, 102, 241, 0.1)',
+    textDecoration: 'none',
+  },
+
+  '.doc-link.current': {
+    background: vars.brandColor,
+    color: vars.brandTextColor,
+  },
+
+  // Code blocks (exclude CodeMirror)
+  'pre:not(.cm-content), code:not(.cm-content code)': {
+    fontFamily: vars.fontMono,
+    fontSize: '0.9em',
+  },
+
+  'pre:not(.cm-content)': {
+    background: vars.codeBackground,
+    border: `1px solid ${vars.codeBorder}`,
+    borderRadius: vars.borderRadius,
+    padding: vars.spacing,
+    overflow: 'auto',
+  },
+
+  // CodeMirror fixes
+  '.cm-editor': {
+    height: '100%',
+  },
+
+  'code:not(pre code)': {
+    background: vars.codeBackground,
+    padding: '2px 6px',
+    borderRadius: '4px',
+  },
+
+  // Badges
+  '.badge': {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '4px',
+  },
+
+  '.badge img': {
+    height: '20px',
+  },
+
+  // Search input
+  'input[type="search"]': {
+    width: '100%',
+    padding: vars.spacing50,
+    border: `1px solid ${vars.codeBorder}`,
+    borderRadius: vars.borderRadius,
+    background: vars.background,
+    color: vars.textColor,
+    fontSize: 'inherit',
+  },
+
+  'input[type="search"]:focus': {
+    outline: 'none',
+    borderColor: vars.brandColor,
+    boxShadow: `0 0 0 2px rgba(99, 102, 241, 0.2)`,
+  },
+
+  // Markdown content styling
+  '.markdown-content': {
+    maxWidth: '48em',
+    margin: '0 auto',
+    padding: vars.spacing200,
+  },
+
+  '.markdown-content h1': {
+    fontSize: '2em',
+    marginTop: 0,
+  },
+
+  '.markdown-content h2': {
+    fontSize: '1.5em',
+    marginTop: '1.5em',
+    paddingBottom: '0.3em',
+    borderBottom: `1px solid ${vars.codeBorder}`,
+  },
+
+  '.markdown-content h3': {
+    fontSize: '1.25em',
+    marginTop: '1.25em',
+  },
+
+  // Table styles (global)
+  table: {
+    width: '100%',
+    borderCollapse: 'collapse',
+    marginBottom: '1em',
+    fontSize: '0.9em',
+  },
+
+  'th, td': {
+    padding: '6px 10px',
+    borderBottom: `1px solid ${vars.codeBorder}`,
+    textAlign: 'left',
+  },
+
+  th: {
+    fontWeight: 600,
+    background: 'rgba(0, 0, 0, 0.03)',
+  },
+
+  '.darkmode th': {
+    background: 'rgba(255, 255, 255, 0.03)',
+  },
+
+  'tr:nth-child(even)': {
+    background: 'rgba(0, 0, 0, 0.03)',
+  },
+
+  '.darkmode tr:nth-child(even)': {
+    background: 'rgba(255, 255, 255, 0.03)',
+  },
+
+  'tr:hover': {
+    background: 'rgba(0, 0, 0, 0.06)',
+  },
+
+  '.darkmode tr:hover': {
+    background: 'rgba(255, 255, 255, 0.06)',
+  },
+
+  // Loading state
+  '.loading': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    fontSize: '1.2em',
+    opacity: 0.6,
+  },
+}