feat: add empty state illustrations for no issues found (#17)

src/App.tsx

@@ -6,7 +6,9 @@ import { HistoryScreen } from './screens/HistoryScreen';
 import { useAppStore } from './store/appStore';
 import { useGitHubIssues } from './hooks/useGitHubIssues';
 import { useIssueAnalysis } from './hooks/useIssueAnalysis';
+import { NoIssuesScreen } from './screens/NoIssuesScreen';
 
+import { Inbox } from 'lucide-react';
 function App() {
   const { currentScreen, issues, analyses, setScreen, addLog } = useAppStore();
   const { fetchIssues, historyInfo } = useGitHubIssues();
@@ -17,8 +19,8 @@ function App() {
       try {
         const fetchedIssues = await fetchIssues(forceRefresh);
         if (!fetchedIssues || fetchedIssues.length === 0) {
-          addLog('No issues found. Returning to input.', 'warning');
-          setScreen('input');
+          addLog('No open unlinked issues found for this repository.', 'warning');
+          setScreen('no-issues');
           return;
         }
 
@@ -61,9 +63,12 @@ function App() {
     >
       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
         {currentScreen === 'input' && <InputScreen />}
+        {currentScreen === 'no-issues' && <NoIssuesScreen />}
+
         {(currentScreen === 'fetching' || currentScreen === 'analyzing') && (
           <LoadingScreen historyInfo={historyInfo} onForceRefresh={() => startAnalysis(true)} />
         )}
+
         {currentScreen === 'report' && <ReportScreen />}
         {currentScreen === 'history' && <HistoryScreen />}
       </div>

src/components/issue/IssueList.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { ScrollArea } from '../ui/ScrollArea';
 import { IssueListItem } from './IssueListItem';
-import { Search } from 'lucide-react';
+import { Search, SearchX } from 'lucide-react';
 import type { RankedIssue } from '../../lib/types';
 
 interface IssueListProps {
@@ -165,14 +165,38 @@ export function IssueList({
         {filtered.length === 0 ? (
           <div
             style={{
-              padding: '20px 12px',
+              padding: '32px 12px',
               textAlign: 'center',
-              color: 'var(--text-dim)',
-              fontSize: 'var(--text-xs)',
-              fontFamily: 'var(--font-mono)',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '8px',
             }}
           >
-            {searchQuery ? 'No issues match your search.' : 'No issues found.'}
+            <SearchX size={28} style={{ color: 'var(--text-dim)', opacity: 0.5 }} />
+            <span
+              style={{
+                color: 'var(--text-muted)',
+                fontSize: 'var(--text-xs)',
+                fontFamily: 'var(--font-mono)',
+              }}
+            >
+              {searchQuery ? `No issues match "${searchQuery}"` : 'No issues found.'}
+            </span>
+            {searchQuery && (
+              <span
+                style={{
+                  color: 'var(--text-dim)',
+                  fontSize: '11px',
+                  fontFamily: 'var(--font-mono)',
+                  cursor: 'pointer',
+                  textDecoration: 'underline',
+                }}
+                onClick={() => onSearchChange('')}
+              >
+                clear search
+              </span>
+            )}
           </div>
         ) : (
           filtered.map((issue, index) => (

src/lib/types.ts

@@ -75,8 +75,7 @@ export const AnalysisResultSchema = z.object({
 export type AnalysisResult = z.infer<typeof AnalysisResultSchema>;
 
 // ── UI State Types ────────────────────────────────
-
-export type AppScreen = 'input' | 'fetching' | 'analyzing' | 'report' | 'history';
+export type AppScreen = 'input' | 'fetching' | 'analyzing' | 'report' | 'history' | 'no-issues';
 
 export type LogType = 'info' | 'success' | 'warning' | 'error';
 

src/screens/NoIssuesScreen.tsx

@@ -0,0 +1,46 @@
+import { Inbox } from 'lucide-react';
+import { useAppStore } from '../store/appStore';
+
+export function NoIssuesScreen() {
+  const { setScreen } = useAppStore();
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '16px',
+        fontFamily: 'var(--font-mono)',
+        color: 'var(--text-muted)',
+      }}
+    >
+      <Inbox size={44} style={{ color: 'var(--text-dim)', opacity: 0.4 }} />
+      <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '6px' }}>
+        <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>
+          This repo has no open, unlinked issues.
+        </span>
+        <span style={{ fontSize: '11px', color: 'var(--text-dim)' }}>
+          All issues may already be linked to a PR, or none are open yet.
+        </span>
+      </div>
+      <button
+        onClick={() => setScreen('input')}
+        style={{
+          marginTop: '8px',
+          fontFamily: 'var(--font-mono)',
+          fontSize: '11px',
+          background: 'transparent',
+          border: '1px solid var(--border)',
+          color: 'var(--text-muted)',
+          padding: '6px 14px',
+          cursor: 'pointer',
+        }}
+      >
+        ← Try another repository
+      </button>
+    </div>
+  );
+}