opencode/NSCT-FrontEnd
Public Access
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix reproducible frontend Docker deployment

Browse Source
This commit is contained in:
faligam
2026-09-06 16:47:39 +02:00
parent c7b091d1e3
commit 37636e144b
21 changed files with 2799 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
Caddyfile
View File

@@ -6,6 +6,10 @@
:443 {
handle_path /api/* {
reverse_proxy nsct-api:8080
}
reverse_proxy web:3000
# Security Headers
header {
@@ -29,9 +33,6 @@
encode gzip zstd
# Rate limiting (optional, only if NSCT_RATE_LIMIT is set)
gzip 1
# Rate limiting (optional, only if NSCT_RATE_LIMIT is set)
@hasRateLimit {
expression {env.NSCT_RATE_LIMIT} != ""
}
@@ -46,6 +47,10 @@
# HTTP fallback (when no domain is set)
:80 {
handle_path /api/* {
reverse_proxy nsct-api:8080
}
reverse_proxy web:3000
header {
X-Content-Type-Options nosniff
@@ -57,4 +62,4 @@
encode gzip zstd
}
}
}

13
Caddyfile.web Normal file
View File

@@ -0,0 +1,13 @@
:3000 {
route {
handle /health {
respond "OK" 200
}
handle {
root * /usr/share/caddy
try_files {path} /index.html
file_server
}
}
}

23
Dockerfile
View File

@@ -12,24 +12,9 @@ COPY . .
ENV NODE_ENV=production
RUN npm run build || exit 1
# Production stage
FROM node:22-alpine AS runtime
WORKDIR /app
# Copy built assets and dependencies
COPY --from=builder /app/build ./build
COPY --from=builder /app/node_modules ./node_modules
COPY package.json .
# Non-root user
RUN addgroup -S nsct && adduser -S nsct -G nsct
USER nsct
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 CMD wget -qO- http://localhost:3000/health || exit 1
# Production stage: serve the static SvelteKit output.
FROM caddy:2.8-alpine AS runtime
COPY Caddyfile.web /etc/caddy/Caddyfile
COPY --from=builder /app/build /usr/share/caddy
EXPOSE 3000
ENV HOST=0.0.0.0
ENV PORT=3000
CMD ["node", "build"]

4
docker-compose.yml
View File

@@ -46,7 +46,7 @@ services:
depends_on:
- web
healthcheck:
test: ["CMD", "wget", "-qO-", "http://localhost:8080/health || exit 1"]
test: ["CMD", "wget", "-qO-", "http://localhost/health"]
interval: 30s
timeout: 5s
retries: 3
@@ -66,4 +66,4 @@ networks:
volumes:
caddy_data:
caddy_config:
caddy_config:

2724
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

16
package.json
View File

@@ -7,21 +7,21 @@
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json"
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
},
"devDependencies": {
"@sveltejs/adapter-static": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@sveltejs/kit": "2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"autoprefixer": "^10.4.0",
"postcss": "^8.4.0",
"svelte": "^5.0.0",
"svelte": "^4.0.0",
"svelte-check": "^4.0.0",
"tailwindcss": "^4.0.0",
"tailwindcss": "^3.4.0",
"typescript": "^5.0.0",
"vite": "^6.0.0"
"vite": "^5.0.0"
},
"dependencies": {
"svelte-markdown": "^0.5.0"
"svelte-markdown": "^0.4.1"
}
}
}

4
src/app.css
View File

@@ -1 +1,3 @@
@import 'tailwindcss';
@tailwind base;
@tailwind components;
@tailwind utilities;

4
src/lib/api.ts
View File

@@ -1,4 +1,4 @@
const API_BASE_URL = import.meta.env.NSCT_API_BASE_URL || 'http://localhost:8080';
const API_BASE_URL = import.meta.env.VITE_NSCT_API_BASE_URL || '/api';
interface ApiConfig {
apiKey?: string;
@@ -57,4 +57,4 @@ export async function apiDelete<T>(
return res.json();
}
export { API_BASE_URL };
export { API_BASE_URL };

6
src/lib/components/ContradictionBanner.svelte
View File

@@ -3,7 +3,7 @@
export let claims: ClaimInfo[] = [];
export let sources: SourceInfo[] = [];
export let onDismiss?: () => void;
export let onDismiss: (() => void) | undefined = undefined;
// Find contradictions: claims with same topic but different conclusions
// A simple heuristic: claims that reference the same source_id or overlapping text
@@ -14,7 +14,7 @@
sourceB: SourceInfo | undefined;
}
$: contradictions: ContradictionPair[] = findContradictions(claims, sources);
$: contradictions = findContradictions(claims, sources);
function findContradictions(claims: ClaimInfo[], sources: SourceInfo[]): ContradictionPair[] {
const pairs: ContradictionPair[] = [];
@@ -95,4 +95,4 @@
</div>
{/each}
</div>
{/if}
{/if}

4
src/lib/components/ErrorBannerStore.ts
View File

@@ -25,7 +25,7 @@ function createBanner(message: string, type: ErrorType, duration = 5000): Banner
}
export function addError(message: string, type: ErrorType = 'error', duration?: number) {
return banners.update(banners => {
return errorBanners.update(banners => {
const banner = createBanner(message, type, duration);
return [...banners, banner];
});
@@ -70,4 +70,4 @@ function createErrorBannerStore() {
};
}
export const errorBanners = createErrorBannerStore();
export const errorBanners = createErrorBannerStore();

6
src/lib/components/ResearchListItem.svelte
View File

@@ -16,9 +16,7 @@
</script>
<div
class="group flex flex-col gap-1 p-3 rounded-lg cursor-pointer transition-colors border border-transparent"
class:ring-2 class:ring-indigo-500 class:bg-indigo-50 class:dark:bg-indigo-950/30 {isActive}
class:hover:bg-gray-100 class:dark:hover:bg-gray-800
class="group flex flex-col gap-1 p-3 rounded-lg cursor-pointer transition-colors border border-transparent hover:bg-gray-100 dark:hover:bg-gray-800 {isActive ? 'ring-2 ring-indigo-500 bg-indigo-50 dark:bg-indigo-950/30' : ''}"
on:click={() => window.location.href = `/research/${item.id}`}
>
<div class="flex items-center justify-between gap-2">
@@ -41,4 +39,4 @@
></span>
<span class="text-xs text-gray-500 font-medium">{item.status}</span>
</div>
</div>
</div>

8
src/lib/components/Sidebar.svelte
View File

@@ -65,7 +65,7 @@
<aside
class="h-full flex flex-col bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 transition-transform duration-200 ease-in-out"
style="width: 20rem;"
class:{-translate-x-full: isMobile && !$sidebarOpen}
class:-translate-x-full={isMobile && !$sidebarOpen}
>
<!-- Top bar -->
<div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
@@ -95,10 +95,10 @@
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-7 h-7 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs font-bold">
{$userObj?.apiKey?.[0]?.toUpperCase() ?? 'U'}
{userObj?.apiKey?.[0]?.toUpperCase() ?? 'U'}
</div>
<span class="text-sm text-gray-700 dark:text-gray-300 truncate">
{$userObj?.apiKey ? $userObj.apiKey.substring(0, 8) : 'Gast'}
{userObj?.apiKey ? userObj.apiKey.substring(0, 8) : 'Gast'}
</span>
</div>
<button
@@ -154,4 +154,4 @@
class="fixed inset-0 z-30 bg-black/50"
on:click={toggleSidebar}
></div>
{/if}
{/if}

4
src/lib/theme.ts
View File

@@ -1,5 +1,7 @@
import { theme } from '$lib/stores';
export { theme };
export function initTheme() {
const stored = localStorage.getItem('nsct-theme');
if (stored === 'dark' || stored === 'light') {
@@ -17,4 +19,4 @@ export function toggleTheme() {
export function applyTheme(t: 'dark' | 'light') {
document.documentElement.classList.toggle('dark', t === 'dark');
localStorage.setItem('nsct-theme', t);
}
}

4
src/routes/+layout.svelte
View File

@@ -1,6 +1,6 @@
<script>
import '../app.css';
import { initTheme, applyTheme } from '$lib/theme';
import { theme, initTheme, applyTheme } from '$lib/theme';
import { onMount } from 'svelte';
initTheme();
@@ -14,4 +14,4 @@
<meta name="description" content="Neutraler Recherche- und Analyse-Report" />
</svelte:head>
<slot />
<slot />

18
src/routes/research/new/+page.svelte
View File

@@ -94,17 +94,13 @@
<div class="flex flex-wrap gap-2">
{#each ['Deutsch', 'English', 'Multi'] as lang}
<label
class="flex items-center gap-2 px-4 py-2.5 border rounded-lg cursor-pointer transition-colors"
class:ring-2 class:ring-indigo-500={language === lang}
class:border-indigo-500={language === lang}
class:border-gray-300 dark:border-gray-600={language !== lang}
class:bg-indigo-50 dark:class:bg-indigo-900/20={language === lang}
class="flex items-center gap-2 px-4 py-2.5 border rounded-lg cursor-pointer transition-colors {language === lang ? 'ring-2 ring-indigo-500 border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20' : 'border-gray-300 dark:border-gray-600'}"
>
<input
type="radio"
name="language"
value={lang}
bind:value={language}
bind:group={language}
class="sr-only"
disabled={submitting}
/>
@@ -122,17 +118,13 @@
<div class="flex flex-wrap gap-2">
{#each ['quick', 'normal', 'deep'] as d}
<label
class="flex items-center gap-2 px-4 py-2.5 border rounded-lg cursor-pointer transition-colors"
class:ring-2 class:ring-indigo-500={depth === d}
class:border-indigo-500={depth === d}
class:border-gray-300 dark:border-gray-600={depth !== d}
class:bg-indigo-50 dark:class:bg-indigo-900/20={depth === d}
class="flex items-center gap-2 px-4 py-2.5 border rounded-lg cursor-pointer transition-colors {depth === d ? 'ring-2 ring-indigo-500 border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20' : 'border-gray-300 dark:border-gray-600'}"
>
<input
type="radio"
name="depth"
value={d}
bind:value={depth}
bind:group={depth}
class="sr-only"
disabled={submitting}
/>
@@ -171,4 +163,4 @@
</div>
{/if}
</div>
</div>
</div>

6
src/routes/research/{id}/+page.svelte
View File

@@ -254,9 +254,7 @@
{#each tabs as tab}
<button
on:click={() => activeTab = tab}
class="px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap"
class:border-indigo-500 class:text-indigo-600 class:dark:text-indigo-400={activeTab === tab}
class:border-transparent class:text-gray-500 class:hover:text-gray-700 class:dark:text-gray-400 class:dark:hover:text-gray-300={activeTab !== tab}
class="px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap {activeTab === tab ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'}"
>
{tab}
</button>
@@ -328,4 +326,4 @@
<!-- Share Modal -->
{#if showShareModal}
<ShareModal researchId={researchId} detail={detail} on:close={() => showShareModal = false} on:share={onShare} on:revoke={onRevoke} />
{/if}
{/if}

4
src/routes/research/{id}/components/MethodologyTab.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { Markdown } from 'svelte-markdown';
import Markdown from 'svelte-markdown';
export let methodology: string = '';
export let loading = false;
@@ -32,4 +32,4 @@
Methodik wird nach Abschluss der Recherche verfügbar sein.
</p>
{/if}
</div>
</div>

4
src/routes/research/{id}/components/ReportTab.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { Markdown } from 'svelte-markdown';
import Markdown from 'svelte-markdown';
import type { ResearchDetail } from '$lib/research-api';
export let report: string = '';
@@ -119,4 +119,4 @@
Bericht wird generiert, sobald die Recherche abgeschlossen ist.
</p>
{/if}
</div>
</div>

9
src/routes/research/{id}/components/StatusTab.svelte
View File

@@ -86,12 +86,7 @@
<div class="relative flex items-start gap-3 pl-8">
<!-- Timeline dot -->
<div
class="absolute left-2.5 w-3 h-3 rounded-full border-2 z-10"
class:border-blue-500 class:bg-blue-500={i <= currentStepIndex() && statusText !== 'FAILED' && statusText !== 'STOPPED'}
class:border-emerald-500 class:bg-emerald-500={statusText === 'COMPLETED' && i <= currentStepIndex()}
class:border-red-500 class:bg-red-500={statusText === 'FAILED'}
class:border-orange-500 class:bg-orange-500={statusText === 'STOPPED'}
class:border-gray-300 class:bg-gray-100 dark:class:bg-gray-800 dark:class:border-gray-600={i > currentStepIndex()}
class="absolute left-2.5 w-3 h-3 rounded-full border-2 z-10 {statusText === 'FAILED' ? 'border-red-500 bg-red-500' : statusText === 'STOPPED' ? 'border-orange-500 bg-orange-500' : statusText === 'COMPLETED' && i <= currentStepIndex() ? 'border-emerald-500 bg-emerald-500' : i <= currentStepIndex() ? 'border-blue-500 bg-blue-500' : 'border-gray-300 bg-gray-100 dark:bg-gray-800 dark:border-gray-600'}"
></div>
<!-- Step label -->
<span class="text-sm {STEP_COLORS[statusText] || (i <= currentStepIndex() ? 'text-gray-700 dark:text-gray-300' : 'text-gray-400 dark:text-gray-600')}">
@@ -156,4 +151,4 @@
<p class="text-sm text-red-600 dark:text-red-400">{error}</p>
</div>
{/if}
</div>
</div>

6
src/routes/share/[token]/+page.svelte
View File

@@ -2,7 +2,7 @@
import { getShareData } from '$lib/research-api';
import type { ShareData, SourceInfo, ClaimInfo, EvidenceScore } from '$lib/research-api';
import { truncateId, formatDate, getConfidenceBadge, getIndependenceBadge, scoreColor } from '$lib/utils/formatters';
import { Markdown } from 'svelte-markdown';
import Markdown from 'svelte-markdown';
import { onMount } from 'svelte';
import { errorBanners } from '$lib/components/ErrorBannerStore';
@@ -264,7 +264,7 @@
Evidenz-Scores
</h2>
<div class="space-y-4">
{#each shareData.evidence_scores as (key, value)}
{#each Object.entries(shareData.evidence_scores) as [key, value]}
<div>
<div class="flex items-center justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">
@@ -323,4 +323,4 @@
</div>
</div>
{/if}
</div>
</div>

4
svelte.config.js
View File

@@ -6,7 +6,7 @@ const config = {
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: undefined,
fallback: 'index.html',
precompress: false,
strict: true
}),
@@ -19,4 +19,4 @@ const config = {
preprocess: vitePreprocess()
};
export default config;
export default config;