|
+ 📜 MANIFESTO + Why this exists + AI for the Underdogs. + |
+
+ 📖 STORY + Solo founder journey from Indonesia + 2 months. 0 team. 0 VC. 309 research notes. + |
+
+ 🛡️ ANTI-MENGUAP PROTOCOL + Universal pattern for AI agent context persistence + Free to adopt. Cite optional. + |
+
+ 🌐 Try SIDIX LIVE · + 🤖 For AI Agents · + 📢 Help Amplify +
+ +diff --git a/SIDIX_LANDING/index.html b/SIDIX_LANDING/index.html index dbf1ff4f..96353c53 100644 --- a/SIDIX_LANDING/index.html +++ b/SIDIX_LANDING/index.html @@ -145,6 +145,11 @@ } + + + @@ -1078,21 +1083,25 @@
SIDIX adalah proyek open source. Dukungan kamu membantu menanggung biaya server dan pengembangan.
- - + + + + + + + + Buy me a coffee on Ko-fi + + + +Semua donasi langsung dipakai untuk biaya VPS, GPU training, dan menjaga SIDIX tetap gratis untuk semua orang. 🙏
diff --git a/SIDIX_NEXT_UI/README.md b/SIDIX_NEXT_UI/README.md new file mode 100644 index 00000000..8a1abb96 --- /dev/null +++ b/SIDIX_NEXT_UI/README.md @@ -0,0 +1,89 @@ +# SIDIX_NEXT_UI + +Next.js (App Router) frontend untuk SIDIX — replacement gradual dari `SIDIX_USER_UI` (vanilla TS+Vite). + +**Status: 2026-04-30 — Initial scaffold + 3 components ported.** + +## Lock Decisions (per FOUNDER_JOURNAL 2026-04-30) + +- Framework: **Next.js 15 App Router** + TypeScript + Tailwind v3 + lucide-react + framer-motion +- Source scaffolding: `C:\Users\ASUS\Downloads\Kimi_Agent_Sidix AI Agent Selesai\UI Baru SIDIX\app\` +- Brand: Space Grotesk + neon palette (#7C5CFF #00D2FF #FF6EC7 #0B0F2A #FFFFFF) +- Backend: `ctrl.sidixlab.com:8765` (FastAPI brain_qa) — **TIDAK BERUBAH** +- **NO MOCK DATA**: hapus "Halo Ayudia / Pro Plan / 1,250 Credits / Healthy Drink Campaign / Aktivitas dummy" — wire ke fitur SIDIX real + +## Struktur + +``` +SIDIX_NEXT_UI/ +├── app/ +│ ├── globals.css # Space Grotesk import + brand CSS vars +│ ├── layout.tsx # Root layout (font-grotesk + bg) +│ └── page.tsx # Home: 3-column LeftSidebar/ChatDashboard/RightPanel +├── components/ +│ ├── LeftSidebar.tsx # Navigation (Chat/Agent/Tools/Projects/Knowledge/Integrations/History) +│ ├── ChatDashboard.tsx # Real chat dengan persona selector + quick actions + loading state +│ └── RightPanel.tsx # Built-in Tools panel + status (placeholder, real wire post-reset) +├── lib/ +│ ├── sidix-client.ts # API wrapper: chat() + health() + streamGenerate() +│ └── cn.ts # clsx + tailwind-merge +├── package.json +├── next.config.mjs # Rewrite /api/brain/* -> ctrl.sidixlab.com +├── tailwind.config.ts # SIDIX brand tokens +├── postcss.config.mjs +└── tsconfig.json +``` + +## Yang Sudah Ada (Hari ini) + +✅ Next.js scaffolding minimal (manual, tanpa `create-next-app` untuk hemat token) +✅ Tailwind brand tokens (`sidix-purple/cyan/pink/dark/surface`) +✅ Layout 3-column responsive (sidebar 250px / chat flex / right 320px hidden lg) +✅ ChatDashboard wired ke `POST /agent/chat` REAL (bukan mock) +✅ Persona selector (5 SIDIX persona LOCKED) +✅ Loading state dengan timer transparan ("SIDIX sedang berpikir... 12s") +✅ Error state graceful (message + saran cek /health) +✅ Quick actions sebagai prompt starter + +## Yang Belum (Post Limit Reset) + +⏳ ParticleBackground component (Three.js / canvas) — defer, optional polish +⏳ Real wire RightPanel ke tools registry endpoint +⏳ Streaming SSE wrapper untuk `/agent/chat` (sekarang stream cuma di `/agent/generate/stream` raw) +⏳ Auth (Supabase) — replace static greeting dengan user real +⏳ Quota display real dari `/quota/status` +⏳ Mobile responsive polish (sidebar collapse, bottom nav) +⏳ Mascot Option B (image bos + SDXL state variants) +⏳ Deploy: PM2 reconfig `sidix-ui` ganti `serve dist` → `next start -p 4000` +⏳ Test e2e: install deps + npm run build + npm run start + +## Run Locally (saat dev) + +```bash +cd SIDIX_NEXT_UI +npm install +# (set NEXT_PUBLIC_BRAIN_QA_URL kalau mau backend lain) +npm run dev +# Browse: http://localhost:4000 +``` + +## Deploy ke VPS (Future) + +```bash +# Di VPS: +cd /opt/sidix +git pull +cd SIDIX_NEXT_UI +npm install --omit=dev +npm run build + +# Update PM2: +pm2 stop sidix-ui # stop yang lama (serve dist dari SIDIX_USER_UI) +pm2 delete sidix-ui +pm2 start npm --name "sidix-next-ui" -- run start +pm2 save + +# Nginx tetap proxy_pass ke localhost:4000 +``` + +Atau parallel deploy dulu di subdomain `next.sidixlab.com` sebelum cutover dari `app.sidixlab.com` lama. diff --git a/SIDIX_NEXT_UI/app/globals.css b/SIDIX_NEXT_UI/app/globals.css new file mode 100644 index 00000000..4fad8511 --- /dev/null +++ b/SIDIX_NEXT_UI/app/globals.css @@ -0,0 +1,132 @@ +@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + /* SIDIX Brand Colors (Kimi scaffolding parity) */ + --indigo: #6C5CFF; + --cyan: #00D2FF; + --amber: #FFB34D; + --pink: #FF6EC7; + --green: #22C55E; + --deep-navy: #080F1A; + --dark-blue: #151A2E; + --surface: #1E2340; + --card: #2A2F4F; + --text-primary: #E6E9F7; + --text-secondary: #8B92B4; + --text-muted: #5A6080; + --border-subtle: rgba(255, 255, 255, 0.06); + --border-active: rgba(108, 92, 255, 0.35); + } + + * { + box-sizing: border-box; + } + + body { + font-family: "Space Grotesk", system-ui, sans-serif; + background: var(--deep-navy); + color: var(--text-primary); + overflow: hidden; + -webkit-font-smoothing: antialiased; + } +} + +@layer utilities { + .scrollbar-thin { + scrollbar-width: thin; + scrollbar-color: rgba(255, 255, 255, 0.08) transparent; + } + .scrollbar-thin::-webkit-scrollbar { width: 5px; } + .scrollbar-thin::-webkit-scrollbar-track { background: transparent; } + .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; } + .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); } +} + +/* Animations */ +@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } +@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } +@keyframes progressFill { from { width: 0%; } } +@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } +@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 8px rgba(108, 92, 255, 0.2); } 50% { box-shadow: 0 0 16px rgba(108, 92, 255, 0.4); } } + +.animate-progress-fill { animation: progressFill 0.8s ease-out forwards; } +.animate-float { animation: float 3s ease-in-out infinite; } +.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } + +/* PRO Card Shimmer (SIDIX PRO promo) */ +.pro-card-shimmer { + position: relative; + overflow: hidden; +} +.pro-card-shimmer::before { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: conic-gradient( + from 0deg, + transparent 0%, + rgba(99, 102, 241, 0.6) 15%, + rgba(139, 92, 246, 0.6) 30%, + rgba(236, 72, 153, 0.6) 45%, + transparent 60% + ); + animation: rotate 3s linear infinite; +} +.pro-card-shimmer::after { + content: ""; + position: absolute; + inset: 2px; + background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%); + border-radius: 22px; +} + +/* Surfaces */ +.input-surface { + background: var(--surface); + border: 1px solid var(--border-subtle); + border-radius: 16px; + transition: all 0.2s ease; +} +.input-surface:focus-within { + border-color: var(--border-active); + box-shadow: 0 0 0 3px rgba(108, 92, 255, 0.1); +} + +/* Chip */ +.chip { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 8px 16px; + border-radius: 100px; + font-size: 13px; + font-weight: 500; + transition: all 0.2s ease; +} +.chip-default { + background: var(--card); + border: 1px solid var(--border-subtle); + color: var(--text-secondary); +} +.chip-default:hover { + border-color: var(--border-active); + color: var(--text-primary); +} + +/* Mascot placeholder (until SDXL render available) */ +.mascot-placeholder { + width: 100%; + height: 100%; + background: radial-gradient(circle at 50% 40%, #7C5CFF 0%, #00D2FF 40%, transparent 70%); + border-radius: 50%; + filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35)); + position: relative; +} diff --git a/SIDIX_NEXT_UI/app/layout.tsx b/SIDIX_NEXT_UI/app/layout.tsx new file mode 100644 index 00000000..effe6c30 --- /dev/null +++ b/SIDIX_NEXT_UI/app/layout.tsx @@ -0,0 +1,20 @@ +import type { Metadata } from "next"; +import "./globals.css"; + +export const metadata: Metadata = { + title: "SIDIX — Creative AI Agent", + description: + "Self-hosted, free, open-source Creative AI Agent. Tumbuh setiap hari, bukan chatbot biasa.", + applicationName: "SIDIX", + authors: [{ name: "Mighan Lab / Tiranyx" }], +}; + +export default function RootLayout({ + children, +}: Readonly<{ children: React.ReactNode }>) { + return ( + + {children} + + ); +} diff --git a/SIDIX_NEXT_UI/app/page.tsx b/SIDIX_NEXT_UI/app/page.tsx new file mode 100644 index 00000000..7bbb7a21 --- /dev/null +++ b/SIDIX_NEXT_UI/app/page.tsx @@ -0,0 +1,15 @@ +import LeftSidebar from "@/components/LeftSidebar"; +import ChatDashboard from "@/components/ChatDashboard"; +import RightPanel from "@/components/RightPanel"; + +export default function HomePage() { + return ( ++ Aku Sidix, Creative AI Agent-mu dari Bogor 🌿 +
++ Siap bantu wujudkan ide kerenmu jadi nyata! +
+Ide brilian
+dimulai dari
++ obrolan seru! ✨ +
++ Bantu aku bikin ide campaign produk minuman sehat untuk anak muda, konsepnya fun & kekinian! +
++ Siap! Ini beberapa ide campaign yang fun & kekinian untuk minuman sehat: +
++ {card.title} +
++ {card.description} +
++ Mau aku bantu buatkan konsep visual atau copywriting-nya juga? 😎 +
+ ++ {m.content} +
+{m.content}
++ {m.content} +
+Generate brand kit + konten + campaign dalam 1 klik
+—
+—
+Relevance
+—
+Quality
+—
+Creativity
+—
+Brand
+—
+Actionability
+—
+Total
+—
+