Ollama 설치 안내 UI + 온보딩 Ollama 단계

- StatusBar: 오프라인 3초 후 넛징 버블 표시 ("설치 안내 보기→" 링크)
- OllamaGuideModal: 3단계 설치 안내 (다운로드→모델 pull→자동 연결)
- OnboardingModal: Step 3에 Ollama 설치 안내 단계 추가
- Settings 정보 탭: "초기 설정 안내 다시 보기" 버튼
- system.openExternal IPC 추가 (외부 URL 열기)

src/renderer/components/StatusBar.tsx

@@ -1,14 +1,17 @@
 // src/renderer/components/StatusBar.tsx
-// 인스트루먼트 섀시 하단 — 각인 스타일 상태 표시
+// 인스트루먼트 섀시 하단 — 각인 스타일 상태 표시 + Ollama 오프라인 넛징
 
 import { useState, useEffect } from 'react'
-import { Box, Typography } from '@mui/material'
+import { Box, Typography, Fade } from '@mui/material'
 import { Led } from './ds'
 import { d3roPalette, d3roFontMono } from '../theme'
+import { OllamaGuideModal } from './OllamaGuideModal'
 import type { LLMStatus } from '@shared/types'
 
 export function StatusBar(): React.ReactElement {
   const [llmStatus, setLlmStatus] = useState<LLMStatus | null>(null)
+  const [showNudge, setShowNudge] = useState(false)
+  const [guideOpen, setGuideOpen] = useState(false)
 
   useEffect(() => {
     window.electronAPI.llm.getStatus().then((r) => {
@@ -27,37 +30,115 @@ export function StatusBar(): React.ReactElement {
 
   const connected = llmStatus?.connectionState === 'connected'
 
+  // 오프라인 3초 후 넛징 버블 표시
+  useEffect(() => {
+    if (!connected) {
+      const timer = setTimeout(() => setShowNudge(true), 3000)
+      return () => clearTimeout(timer)
+    }
+    setShowNudge(false)
+    return undefined
+  }, [connected])
+
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 2,
-        px: 2,
-        py: 0.5,
-        borderTop: `1px solid ${d3roPalette.border.subtle}`,
-        bgcolor: d3roPalette.bg.sidebar,
-        minHeight: 28,
-      }}
-    >
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
-        <Led color={connected ? 'green' : 'red'} size={6} />
-        <Typography sx={{ fontFamily: d3roFontMono, fontSize: '9px', color: d3roPalette.text.inactive, letterSpacing: '1px', fontWeight: 700 }}>
-          {connected ? 'OLLAMA' : 'OFFLINE'}
+    <>
+      <Box
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 2,
+          px: 2,
+          py: 0.5,
+          borderTop: `1px solid ${d3roPalette.border.subtle}`,
+          bgcolor: d3roPalette.bg.sidebar,
+          minHeight: 28,
+        }}
+      >
+        {/* 넛징 버블 */}
+        <Fade in={showNudge && !connected}>
+          <Box
+            sx={{
+              position: 'absolute',
+              bottom: 32,
+              left: 8,
+              bgcolor: d3roPalette.bg.card,
+              border: `1px solid ${d3roPalette.border.default}`,
+              borderRadius: '10px',
+              px: 2,
+              py: 1.5,
+              boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
+              maxWidth: 280,
+              zIndex: 100,
+              // 말풍선 삼각형
+              '&::after': {
+                content: '""',
+                position: 'absolute',
+                bottom: -6,
+                left: 16,
+                width: 12,
+                height: 12,
+                bgcolor: d3roPalette.bg.card,
+                border: `1px solid ${d3roPalette.border.default}`,
+                borderTop: 'none',
+                borderLeft: 'none',
+                transform: 'rotate(45deg)',
+              },
+            }}
+          >
+            <Typography sx={{ fontSize: '12px', color: d3roPalette.text.primary, mb: 0.5, fontWeight: 600 }}>
+              Ollama가 실행되지 않고 있어요
+            </Typography>
+            <Typography sx={{ fontSize: '11px', color: d3roPalette.text.inactive, mb: 1 }}>
+              LLM 후처리(번역, 요약 등)를 사용하려면 Ollama가 필요합니다.
+            </Typography>
+            <Typography
+              onClick={() => { setGuideOpen(true); setShowNudge(false) }}
+              sx={{
+                fontSize: '11px',
+                color: d3roPalette.accent.amber,
+                fontWeight: 700,
+                cursor: 'pointer',
+                '&:hover': { textDecoration: 'underline' },
+              }}
+            >
+              설치 안내 보기 →
+            </Typography>
+          </Box>
+        </Fade>
+
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+          <Led color={connected ? 'green' : 'red'} size={6} />
+          <Typography
+            onClick={() => !connected && setGuideOpen(true)}
+            sx={{
+              fontFamily: d3roFontMono,
+              fontSize: '9px',
+              color: connected ? d3roPalette.text.inactive : d3roPalette.tag.red,
+              letterSpacing: '1px',
+              fontWeight: 700,
+              cursor: connected ? 'default' : 'pointer',
+              '&:hover': connected ? {} : { textDecoration: 'underline' },
+            }}
+          >
+            {connected ? 'OLLAMA' : 'OFFLINE'}
+          </Typography>
+        </Box>
+
+        {llmStatus?.activeModel && (
+          <Typography sx={{ fontFamily: d3roFontMono, fontSize: '9px', color: d3roPalette.text.dimLabel, letterSpacing: '0.5px' }}>
+            {llmStatus.activeModel.toUpperCase()}
+          </Typography>
+        )}
+
+        <Box sx={{ flex: 1 }} />
+
+        <Typography sx={{ fontFamily: d3roFontMono, fontSize: '9px', color: d3roPalette.text.muted, letterSpacing: '1px', fontWeight: 700 }}>
+          PRECISION DATA LINK
         </Typography>
       </Box>
 
-      {llmStatus?.activeModel && (
-        <Typography sx={{ fontFamily: d3roFontMono, fontSize: '9px', color: d3roPalette.text.dimLabel, letterSpacing: '0.5px' }}>
-          {llmStatus.activeModel.toUpperCase()}
-        </Typography>
-      )}
-
-      <Box sx={{ flex: 1 }} />
-
-      <Typography sx={{ fontFamily: d3roFontMono, fontSize: '9px', color: d3roPalette.text.muted, letterSpacing: '1px', fontWeight: 700 }}>
-        PRECISION DATA LINK
-      </Typography>
-    </Box>
+      <OllamaGuideModal open={guideOpen} onClose={() => setGuideOpen(false)} />
+    </>
   )
 }