feat: visible in-plugin request log + Fetch in-progress indicator (no more guessing if fetch ran); bump 0.1.18

package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-ai-plugin",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "private": true,
   "dependencies": {
     "@create-figma-plugin/ui": "^4.0.3",

src/ui.tsx

@@ -30,7 +30,7 @@ const MIN_WINDOW_SIZE = { width: 320, height: 200 }
 // very high — actual clamp is done by main via clampWindowSize (bounds*zoom).
 
 // Full plugin version shown in the footer status bar. Keep in sync with package.json "version".
-const PLUGIN_VERSION = '0.1.17'
+const PLUGIN_VERSION = '0.1.18'
 
 const fieldStyle = {
   display: 'flex',
@@ -97,8 +97,8 @@ class ErrorBoundary extends Component<{ children: any }, { error: Error | null }
   }
 }
 
-function SettingsPanel (props: { settings: Settings, setSettings: (s: Settings) => void, logEvent: (msg: string) => void }) {
-  const { settings, setSettings, logEvent } = props
+function SettingsPanel (props: { settings: Settings, setSettings: (s: Settings) => void, logEvent: (msg: string) => void, fetching: boolean, setFetching: (v: boolean) => void }) {
+  const { settings, setSettings, logEvent, fetching, setFetching } = props
   const [showKey, setShowKey] = useState(false)
   const [savedNote, setSavedNote] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
@@ -112,6 +112,7 @@ function SettingsPanel (props: { settings: Settings, setSettings: (s: Settings)
 
   useEffect(function () {
     const dispose = on('MODELS_RESULT', function (payload: { ok: boolean, models: string[], error?: string, status?: number, raw?: string, requestEcho?: { baseUrl: string, keyLen: number } }) {
+      setFetching(false)
       logEvent('MODELS_RESULT · ok=' + payload.ok + ' · status=' + (payload.status != null ? payload.status : '?'))
       if (payload.requestEcho != null) {
         logEvent('  request reached main · baseUrl=' + payload.requestEcho.baseUrl + ' · keyLen=' + payload.requestEcho.keyLen)
@@ -138,6 +139,7 @@ function SettingsPanel (props: { settings: Settings, setSettings: (s: Settings)
 
   useEffect(function () {
     const dispose = on('PROBE_RESULT', function (p: { msg: string }) {
+      setFetching(false)
       logEvent('PROBE: ' + p.msg)
     })
     return dispose
@@ -153,6 +155,7 @@ function SettingsPanel (props: { settings: Settings, setSettings: (s: Settings)
 
   function fetchModels () {
     if (provider == null) return
+    setFetching(true)
     setModelsError(null)
     logEvent('FETCH clicked · baseUrl=' + provider.baseUrl + ' · key=' + (provider.apiKey.trim() !== '' ? 'PRESENT(' + provider.apiKey.length + ' chars)' : 'EMPTY'))
     emit('FETCH_MODELS', { baseUrl: provider.baseUrl, ['api' + 'Key']: provider.apiKey })
@@ -226,7 +229,10 @@ function SettingsPanel (props: { settings: Settings, setSettings: (s: Settings)
               onValueChange={function (id: string) { patch({ defaultModel: id }) }}
               options={modelOptions.map(function (m) { return { value: m, text: m } })}
             />
-            <Button onClick={fetchModels} disabled={provider.apiKey.trim() === ''}>Fetch</Button>
+            <Button onClick={fetchModels} disabled={provider.apiKey.trim() === '' || fetching}>
+              {fetching ? 'Fetching…' : 'Fetch'}
+            </Button>
+            {fetching && <Muted>request is running…</Muted>}
           </div>
           {modelsError != null && (
             <Muted style={{ color: 'var(--figma-color-text-danger)' }}>{modelsError}</Muted>
@@ -259,6 +265,7 @@ function Plugin () {
   const [loaded, setLoaded] = useState(false)
   const [log, setLog] = useState<string[]>([])
   const [copied, setCopied] = useState(false)
+  const [fetching, setFetching] = useState(false)
   function logEvent (msg: string) {
     const t = new Date().toISOString().slice(11, 23)
     setLog(function (prev) { return prev.concat('[' + t + '] ' + msg) })
@@ -597,9 +604,16 @@ function Plugin () {
         {/* Body — semantic <main>, stretches via flex child of the column */}
         <main style={{ flex: '1 1 auto', overflow: 'auto', padding: 'var(--space-8)' }}>
           {loaded
-            ? <SettingsPanel settings={settings} setSettings={setSettings} logEvent={logEvent} />
+            ? <SettingsPanel settings={settings} setSettings={setSettings} logEvent={logEvent} fetching={fetching} setFetching={setFetching} />
             : <Muted>Loading…</Muted>}
         </main>
+        {/* Live log — shows the actual request flow (PROBE / FETCH / RESULT) from main.ts */}
+        <div style={{ flex: '0 0 auto', maxHeight: '140px', overflow: 'auto', background: 'var(--figma-color-bg-secondary, #1e1e1e)', borderTop: '1px solid var(--figma-color-border)', padding: 'var(--space-4)', margin: 0 }}>
+          <Text style={{ fontSize: '10px', fontWeight: 600, display: 'block', marginBottom: 4 }}>Request log</Text>
+          {log.length === 0
+            ? <Muted style={{ fontSize: '10px' }}>No events yet</Muted>
+            : <pre style={{ margin: 0, fontSize: '10px', lineHeight: 1.4, whiteSpace: 'pre-wrap', wordBreak: 'break-word', color: 'var(--figma-color-text)' }}>{log.join('\n')}</pre>}
+        </div>
         {/* Footer — status bar */}
         <Separator />
         <footer style={{ display: 'flex', alignItems: 'center', flex: '0 0 auto', padding: 'var(--space-4)' }}>