@sutrata/editor 0.1.0

package/src/navigator/StatisticsDialog.tsx

@@ -0,0 +1,249 @@
+import React from 'react'
+import { useDocument } from '../context/DocumentContext'
+import { extractWorkflowData } from '../file/workflow-reports'
+import { getEditorView } from '../editor/editor-bus'
+import { schema } from '../editor/schema'
+
+interface Props {
+  onClose: () => void
+}
+
+export function StatisticsDialog({ onClose }: Props) {
+  const { ast, text, setText } = useDocument()
+  const { scenes, characters } = extractWorkflowData(ast)
+
+  const handleUpdateActor = (charName: string, actorName: string) => {
+    const cleanChar = charName.trim().toUpperCase()
+    if (!cleanChar) return
+
+    const view = getEditorView()
+    const key = `characters.${cleanChar}`
+
+    if (view) {
+      let tr = view.state.tr
+      let titlePagePos: number | null = null
+      view.state.doc.forEach((node, offset) => {
+        if (node.type.name === 'title_page') titlePagePos = offset
+      })
+
+      if (titlePagePos !== null) {
+        const tpNode = view.state.doc.nodeAt(titlePagePos)!
+        let existingPos: number | null = null
+        let pos = titlePagePos + 1 // inside title_page
+
+        tpNode.forEach((field) => {
+          if (field.attrs['fmKey'] === key) {
+            existingPos = pos
+          }
+          pos += field.nodeSize
+        })
+
+        if (existingPos !== null) {
+          const fieldNode = view.state.doc.nodeAt(existingPos)!
+          if (actorName.trim() === '') {
+            tr = tr.delete(existingPos, existingPos + fieldNode.nodeSize)
+          } else {
+            tr = tr.replaceWith(
+              existingPos + 1,
+              existingPos + fieldNode.nodeSize - 1,
+              schema.text(actorName)
+            )
+          }
+        } else if (actorName.trim() !== '') {
+          const insertPos = titlePagePos + tpNode.nodeSize - 1 // end of title_page
+          const newField = schema.nodes['frontmatter_field']!.create(
+            { fmKey: key },
+            schema.text(actorName)
+          )
+          tr = tr.insert(insertPos, newField)
+        }
+        view.dispatch(tr)
+      } else {
+        const freshText = updateActorInText(text, cleanChar, actorName)
+        setText(freshText)
+      }
+    } else {
+      const freshText = updateActorInText(text, cleanChar, actorName)
+      setText(freshText)
+    }
+  }
+
+  // Word count helper
+  const wordCount = text.split(/\s+/).filter(Boolean).length
+
+  // Sum up estimated duration. Each scene's est-duration is "MM:SS" — sum
+  // in seconds and only convert to minutes/hours once, at the end. Summing
+  // the MM parts alone (the previous approach) silently dropped every
+  // scene's seconds component, undercounting the total by tens of minutes
+  // on a script with many scenes.
+  let totalSeconds = 0
+  scenes.forEach(s => {
+    const match = /^(\d+):(\d{1,2})$/.exec(s.estDuration.trim())
+    if (match && match[1] && match[2]) {
+      totalSeconds += Number.parseInt(match[1], 10) * 60 + Number.parseInt(match[2], 10)
+    }
+  })
+  const totalMinutes = Math.round(totalSeconds / 60)
+  const totalDurationLabel = totalSeconds === 0
+    ? 'TBD'
+    : totalMinutes >= 60
+      ? `${Math.floor(totalMinutes / 60)}h ${totalMinutes % 60}m`
+      : `${totalMinutes} min`
+
+  return (
+    <div
+      className="cs-dialog-overlay"
+      role="presentation"
+      onClick={e => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div
+        className="cs-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="cs-stats-dialog-title"
+        style={{ maxWidth: '640px', width: '92%', maxHeight: '85vh', display: 'flex', flexDirection: 'column' }}
+      >
+        <div className="cs-panel-header">
+          <span id="cs-stats-dialog-title" className="cs-panel-title">Script Statistics</span>
+          <button className="cs-panel-close" onClick={onClose} aria-label="Close">
+            ×
+          </button>
+        </div>
+        <div className="cs-panel-body" style={{ overflowY: 'auto', flex: 1, padding: '20px' }}>
+          <div className="cs-stats-summary-grid">
+            <div className="cs-stats-card">
+              <div className="cs-stats-card-val">{scenes.length}</div>
+              <div className="cs-stats-card-lbl">Scenes</div>
+            </div>
+            <div className="cs-stats-card">
+              <div className="cs-stats-card-val">{wordCount.toLocaleString()}</div>
+              <div className="cs-stats-card-lbl">Words</div>
+            </div>
+            <div className="cs-stats-card">
+              <div className="cs-stats-card-val">
+                {totalDurationLabel}
+              </div>
+              <div className="cs-stats-card-lbl">Est. Duration</div>
+            </div>
+          </div>
+
+          <div className="cs-stats-section-hdr">
+            Cast List &amp; Occurrences ({characters.length})
+          </div>
+
+          {characters.length === 0 ? (
+            <div style={{ color: 'var(--cs-ui-text-light-muted, #8c897f)', fontStyle: 'italic', fontSize: '12px' }}>
+              No character cues detected in the screenplay yet.
+            </div>
+          ) : (
+            <table className="cs-stats-table">
+              <thead>
+                <tr>
+                  <th style={{ textAlign: 'left', width: '35%' }}>Character</th>
+                  <th style={{ textAlign: 'left' }}>Actor</th>
+                  <th style={{ textAlign: 'center', width: '15%' }}>Scenes</th>
+                </tr>
+              </thead>
+              <tbody>
+                {characters.map((c, i) => (
+                  <tr key={i}>
+                    <td style={{ fontWeight: '600' }}>{c.name}</td>
+                    <td>
+                      <input
+                        type="text"
+                        className="cs-stats-actor-input"
+                        value={c.actor}
+                        onChange={(e) => handleUpdateActor(c.name, e.target.value)}
+                        placeholder="Assign actor..."
+                        aria-label={`Actor for ${c.name}`}
+                      />
+                    </td>
+                    <td style={{ textAlign: 'center', fontWeight: '500' }}>{c.sceneCount}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+        <div
+          style={{
+            borderTop: '1px solid var(--cs-ui-border-light-subtle, #eeece4)',
+            display: 'flex',
+            justifyContent: 'flex-end',
+            padding: '12px 20px',
+            background: 'var(--cs-ui-bg-panel-subtle, #f4f2ea)',
+          }}
+        >
+          <button
+            type="button"
+            className="cs-confirm-btn-primary"
+            onClick={onClose}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function updateActorInText(text: string, charName: string, actorName: string): string {
+  const lines = text.split('\n')
+  const fmStartIndex = lines.indexOf('---')
+  if (fmStartIndex === -1) {
+    return `---\ncharacters:\n  ${charName}: ${actorName}\n---\n\n${text}`
+  }
+  const fmEndIndex = lines.indexOf('---', fmStartIndex + 1)
+  if (fmEndIndex === -1) return text
+
+  const fmLines = lines.slice(fmStartIndex + 1, fmEndIndex)
+  let charsLineIdx = -1
+  for (let i = 0; i < fmLines.length; i++) {
+    if (fmLines[i]!.trim() === 'characters:') {
+      charsLineIdx = i
+      break
+    }
+  }
+
+  const cleanChar = charName.toUpperCase()
+  if (charsLineIdx === -1) {
+    if (actorName.trim() !== '') {
+      fmLines.push('characters:')
+      fmLines.push(`  ${cleanChar}: ${actorName}`)
+    }
+  } else {
+    let insertIdx = charsLineIdx + 1
+    let charLineIdx = -1
+    while (insertIdx < fmLines.length) {
+      const line = fmLines[insertIdx]!
+      if (!line.startsWith('  ') && line.trim() !== '') {
+        break
+      }
+      const match = /^\s+([A-Za-z0-9_ -]+)\s*:(.*)/.exec(line)
+      if (match && match[1]?.trim().toUpperCase() === cleanChar) {
+        charLineIdx = insertIdx
+        break
+      }
+      insertIdx++
+    }
+
+    if (charLineIdx !== -1) {
+      if (actorName.trim() === '') {
+        fmLines.splice(charLineIdx, 1)
+      } else {
+        fmLines[charLineIdx] = `  ${cleanChar}: ${actorName}`
+      }
+    } else if (actorName.trim() !== '') {
+      fmLines.splice(insertIdx, 0, `  ${cleanChar}: ${actorName}`)
+    }
+  }
+
+  const newLines = [
+    ...lines.slice(0, fmStartIndex + 1),
+    ...fmLines,
+    ...lines.slice(fmEndIndex)
+  ]
+  return newLines.join('\n')
+}

package/src/navigator/scene-list.ts

@@ -0,0 +1,84 @@
+export interface SceneEntry {
+  id: string | null
+  heading: string
+  synopsis: string
+  status: string
+  tags: string[]
+  location: string
+  index: number       // 1-based position (internal, used for PM navigation)
+  textOffset: number  // character offset in source text where this scene starts
+  estDuration?: string
+}
+
+/**
+ * Derive a flat scene list from Sutra source text.
+ * Scenes are identified by scene heading lines (## prefix).
+ */
+export function buildSceneList(text: string): SceneEntry[] {
+  const lines = text.split('\n')
+  const scenes: SceneEntry[] = []
+  let sceneIndex = 0
+  let currentOffset = 0
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i] ?? ''
+    const trimmed = line.trim()
+
+    // Scene headings start with ## (Sutra sigil)
+    if (trimmed.startsWith('## ') || trimmed.startsWith('##\t')) {
+      const headingRaw = trimmed.slice(3).trim()
+      const sceneStart = currentOffset
+
+      // Extract scene id from inline {#...} on the heading line, then strip it
+      const idMatch = /\{#([^}]+)\}/.exec(headingRaw)
+      const sceneId: string | null = idMatch?.[1] ?? null
+      const heading = headingRaw.replace(/\s*\{#[^}]+\}/, '').trim()
+
+      // Collect metadata (& key: value) until next heading
+      let synopsis = ''
+      let status = ''
+      let tags: string[] = []
+      let location = ''
+      let estDuration = ''
+
+      let j = i + 1
+      while (j < lines.length) {
+        const nextLine = (lines[j] ?? '').trim()
+        if (nextLine.startsWith('## ') || nextLine.startsWith('##\t')) break
+        if (nextLine.startsWith('& synopsis:')) {
+          if (!synopsis) synopsis = nextLine.replace('& synopsis:', '').trim()
+        } else if (nextLine.startsWith('& status:')) {
+          status = nextLine.replace('& status:', '').trim()
+        } else if (nextLine.startsWith('& tags:')) {
+          tags = nextLine
+            .replace('& tags:', '')
+            .trim()
+            .split(',')
+            .map((t) => t.trim())
+            .filter(Boolean)
+        } else if (nextLine.startsWith('& location:')) {
+          location = nextLine.replace('& location:', '').trim()
+        } else if (nextLine.startsWith('& est-duration:')) {
+          estDuration = nextLine.replace('& est-duration:', '').trim()
+        }
+        j++
+      }
+
+      scenes.push({
+        id: sceneId,
+        heading,
+        synopsis,
+        status,
+        tags,
+        location,
+        estDuration: estDuration || undefined,
+        index: ++sceneIndex,
+        textOffset: sceneStart,
+      })
+    }
+
+    currentOffset += (line?.length ?? 0) + 1 // +1 for \n
+  }
+
+  return scenes
+}

package/src/settings/SettingsDialog.tsx

@@ -0,0 +1,303 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { useTranslation } from '../i18n/useTranslation'
+import { useDocument } from '../context/DocumentContext'
+import {
+  getAIConfig,
+  saveAIConfig,
+  fetchProviders,
+  getApiKey,
+  setApiKey,
+  deleteApiKey,
+  testConnection,
+  listModels,
+  ProviderConfig,
+  ModelConfig,
+  AIConfig,
+} from '../ai/ai-client'
+
+const UI_LANGUAGES = [
+  { code: 'en', label: 'English' },
+  { code: 'hi', label: 'हिन्दी' },
+  { code: 'ta', label: 'தமிழ்' },
+  { code: 'te', label: 'తెలుగు' },
+  { code: 'ml', label: 'മലയാളം' },
+  { code: 'kn', label: 'ಕನ್ನಡ' },
+  { code: 'bn', label: 'বাংলা' },
+  { code: 'gu', label: 'ગુજરાતી' },
+  { code: 'mr', label: 'मराठी' },
+  { code: 'pa', label: 'ਪੰਜਾਬੀ' },
+  { code: 'or', label: 'ଓଡ଼ିଆ' },
+  { code: 'si', label: 'සිංහල' },
+]
+
+interface Props {
+  onClose: () => void
+}
+
+export function SettingsDialog({ onClose }: Props) {
+  const { t, locale, setLocale } = useTranslation()
+  const { setAIOnboardingVisible } = useDocument()
+  const dialogRef = useRef<HTMLDivElement>(null)
+
+  // AI states
+  const [aiConfig, setAiConfig] = useState<AIConfig>(getAIConfig())
+  const [providers, setProviders] = useState<ProviderConfig[]>([])
+  const [activeKey, setActiveKey] = useState<string>('')
+  const [showKey, setShowKey] = useState<boolean>(false)
+  const [testStatus, setTestStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle')
+  const [testError, setTestError] = useState<string>('')
+  const [dynamicModels, setDynamicModels] = useState<ModelConfig[] | null>(null)
+  const [modelsLoading, setModelsLoading] = useState<boolean>(false)
+
+  useEffect(() => {
+    dialogRef.current?.focus()
+    void loadProviders()
+  }, [])
+
+  const loadProviders = async () => {
+    const p = await fetchProviders(aiConfig)
+    setProviders(p)
+  }
+
+  // Loads the stored key for the selected provider, then refreshes its
+  // model list from the provider's live /models endpoint (falls back to the
+  // static list on any error — see listModels). Depends on `providers` too
+  // so it re-runs once fetchProviders() resolves on mount, instead of
+  // racing it.
+  useEffect(() => {
+    let cancelled = false
+    const run = async () => {
+      setTestStatus('idle')
+      setTestError('')
+      const key = await getApiKey(aiConfig.preferredProvider)
+      if (cancelled) return
+      setActiveKey(key || '')
+      setDynamicModels(null)
+
+      const provider = providers.find(p => p.id === aiConfig.preferredProvider)
+      if (key && provider) {
+        setModelsLoading(true)
+        const models = await listModels(provider, key)
+        if (!cancelled) {
+          setDynamicModels(models)
+          setModelsLoading(false)
+        }
+      }
+    }
+    void run()
+    return () => { cancelled = true }
+  }, [aiConfig.preferredProvider, providers])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') onClose()
+  }
+
+  const handleProviderChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const nextProvider = e.target.value
+    const provider = providers.find(p => p.id === nextProvider)
+    const nextModel = provider?.models[0]?.id || ''
+
+    const updated = {
+      ...aiConfig,
+      preferredProvider: nextProvider,
+      preferredModel: nextModel,
+    }
+    setAiConfig(updated)
+    saveAIConfig(updated)
+  }
+
+  const handleModelChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const updated = {
+      ...aiConfig,
+      preferredModel: e.target.value,
+    }
+    setAiConfig(updated)
+    saveAIConfig(updated)
+  }
+
+  const handleKeyChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value
+    setActiveKey(val)
+    if (val.trim()) {
+      await setApiKey(aiConfig.preferredProvider, val.trim())
+    } else {
+      await deleteApiKey(aiConfig.preferredProvider)
+    }
+    setTestStatus('idle')
+  }
+
+  const handleTestKey = async () => {
+    if (!activeKey.trim()) {
+      setTestStatus('error')
+      setTestError('Please enter an API key to test.')
+      return
+    }
+    setTestStatus('testing')
+    setTestError('')
+    try {
+      const ok = await testConnection(aiConfig.preferredProvider, activeKey.trim(), aiConfig)
+      if (ok) {
+        setTestStatus('success')
+        const provider = providers.find(p => p.id === aiConfig.preferredProvider)
+        if (provider) {
+          setModelsLoading(true)
+          setDynamicModels(await listModels(provider, activeKey.trim()))
+          setModelsLoading(false)
+        }
+      } else {
+        setTestStatus('error')
+        setTestError('Connection failed: empty or invalid response.')
+      }
+    } catch (err: any) {
+      setTestStatus('error')
+      setTestError(err.message || String(err))
+    }
+  }
+
+  const currentProvider = providers.find(p => p.id === aiConfig.preferredProvider)
+  const models = dynamicModels ?? currentProvider?.models ?? []
+
+  return (
+    <div className="cs-dialog-overlay" onClick={onClose}>
+      <div
+        ref={dialogRef}
+        className="cs-dialog cs-settings-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label={t('settings.title')}
+        tabIndex={-1}
+        onClick={e => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
+        style={{ maxWidth: '480px' }}
+      >
+        <div className="cs-dialog-header">
+          <span className="cs-dialog-title">{t('settings.title')}</span>
+          <button className="cs-fr-close" aria-label={t('settings.close')} onClick={onClose}>×</button>
+        </div>
+
+        <div className="cs-settings-body" style={{ maxHeight: '80vh', overflowY: 'auto' }}>
+          <div className="cs-settings-section-label">{t('settings.general')}</div>
+
+          <div className="cs-settings-row">
+            <label className="cs-settings-label" htmlFor="cs-ui-lang-select">
+              {t('settings.uiLanguage')}
+            </label>
+            <select
+              id="cs-ui-lang-select"
+              className="cs-settings-select"
+              value={locale}
+              onChange={e => setLocale(e.target.value)}
+            >
+              {UI_LANGUAGES.map(lang => (
+                <option key={lang.code} value={lang.code}>{lang.label}</option>
+              ))}
+            </select>
+          </div>
+
+          <div style={{ margin: '14px 0 6px 0', borderTop: '1px solid var(--cs-ui-border-light, #e8e8e4)', paddingTop: '14px' }} className="cs-settings-section-label">
+            Intelligence &amp; Voice Settings
+          </div>
+
+          <div className="cs-settings-row">
+            <label className="cs-settings-label" htmlFor="cs-ai-provider-select">
+              Preferred Provider
+            </label>
+            <select
+              id="cs-ai-provider-select"
+              className="cs-settings-select"
+              value={aiConfig.preferredProvider}
+              onChange={handleProviderChange}
+            >
+              {providers.map(p => (
+                <option key={p.id} value={p.id}>{p.name}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="cs-settings-row">
+            <label className="cs-settings-label" htmlFor="cs-ai-model-select">
+              Preferred Model{modelsLoading ? ' (refreshing...)' : ''}
+            </label>
+            <select
+              id="cs-ai-model-select"
+              className="cs-settings-select"
+              value={aiConfig.preferredModel}
+              onChange={handleModelChange}
+              disabled={models.length === 0}
+            >
+              {models.map(m => (
+                <option key={m.id} value={m.id}>{m.name}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="cs-settings-row" style={{ flexDirection: 'column', alignItems: 'stretch', gap: '6px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+              <label className="cs-settings-label" htmlFor="cs-ai-key-input">
+                API Key for {currentProvider?.name || aiConfig.preferredProvider}
+              </label>
+              <button
+                type="button"
+                style={{ background: 'none', border: 'none', color: 'var(--cs-ui-accent, #c4760a)', cursor: 'pointer', fontSize: '11px', padding: 0 }}
+                onClick={() => setShowKey(!showKey)}
+              >
+                {showKey ? 'Hide' : 'Show'}
+              </button>
+            </div>
+            <input
+              id="cs-ai-key-input"
+              type={showKey ? 'text' : 'password'}
+              style={{
+                width: '100%',
+                padding: '7px 10px',
+                border: '1px solid var(--cs-ui-border-light, #ccc)',
+                borderRadius: '4px',
+                boxSizing: 'border-box',
+                fontFamily: 'monospace',
+                fontSize: '12px',
+              }}
+              value={activeKey}
+              onChange={handleKeyChange}
+              placeholder={`Enter API Key for ${aiConfig.preferredProvider}`}
+            />
+            <div style={{ display: 'flex', gap: '8px', marginTop: '4px' }}>
+              <button
+                type="button"
+                className="cs-voice-btn-secondary"
+                style={{ padding: '4px 10px', fontSize: '12px' }}
+                onClick={handleTestKey}
+                disabled={testStatus === 'testing'}
+              >
+                {testStatus === 'testing' ? 'Testing...' : 'Test Connection'}
+              </button>
+            </div>
+            {testStatus === 'success' && (
+              <span style={{ color: '#10b981', fontSize: '12px', marginTop: '2px' }}>
+                ✓ Key verified! Connection succeeded.
+              </span>
+            )}
+            {testStatus === 'error' && (
+              <span style={{ color: '#ef4444', fontSize: '12px', marginTop: '2px', whiteSpace: 'pre-wrap' }}>
+                ✗ Error: {testError}
+              </span>
+            )}
+          </div>
+
+          <div style={{ marginTop: '16px', display: 'flex', justifyContent: 'flex-start' }}>
+            <button
+              type="button"
+              className="cs-voice-btn-primary"
+              style={{ padding: '6px 12px', fontSize: '12px' }}
+              onClick={() => {
+                onClose()
+                setAIOnboardingVisible(true)
+              }}
+            >
+              Open Setup Wizard
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}