From 0877744cd11b0a92a60034b1f73af962b9d0b9be Mon Sep 17 00:00:00 2001 From: nogueiraguh Date: Tue, 10 Mar 2026 09:42:58 -0300 Subject: [PATCH] docs: update README with UI modernization, fix chat icon rendering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Update README: KPI dashboard, SVG icon system, Chart.js, report summary endpoint, ADB wallet fix, updated file sizes - Fix ${IC.bot} rendering literally in chat empty state (single quotes β†’ template literal) - Scale up chat empty state SVG icon to 48px --- README.md | 20 ++++++++++++-------- frontend/index.html | 3 ++- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index fd1e0d5..ee6d01e 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ OCI CIS AI Agent is a self-hosted web application that automates **CIS Oracle Cloud Infrastructure Foundations Benchmark 3.0** compliance checks, powered by **OCI Generative AI** for intelligent analysis and an **MCP (Model Context Protocol)** server architecture for extensible task execution. -The platform combines security compliance scanning, AI-powered chat with **RAG (Retrieval-Augmented Generation)**, infrastructure exploration, and vector-based knowledge storage into a single, containerized solution with Oracle Cloud's official theme (light/dark modes). +The platform combines security compliance scanning, AI-powered chat with **RAG (Retrieval-Augmented Generation)**, infrastructure exploration, and vector-based knowledge storage into a single, containerized solution with an **Oracle Dark Premium** theme (light/dark modes), **KPI dashboard** with compliance gauge, and **Chart.js** visualizations. --- @@ -170,12 +170,15 @@ The platform combines security compliance scanning, AI-powered chat with **RAG ( - Private keys exported as base64 and restored to disk on import - Enables full environment migration between machines (Mac ↔ Windows ↔ Linux) -### 🎨 Theme System +### 🎨 Theme System & UI - **Light/Dark mode toggle** in the sidebar footer -- **Oracle-branded dark mode**: deep dark backgrounds with Oracle Red accent +- **Oracle Dark Premium** design: deep dark backgrounds (#0D0F12), dark cards (#1A1D24), Oracle Red accent (#C74634) - **Oracle-branded light mode**: warm light backgrounds (original theme) - Theme preference persisted in localStorage across sessions - All CSS driven by CSS custom properties β€” zero hardcoded colors +- **SVG icon system**: 45+ Lucide-based inline SVG icons replace all emojis for cross-platform consistency (Windows/Mac/Linux) +- **KPI Dashboard**: compliance score gauge (SVG semicircular arc with gradient), pass/fail/total KPI cards, donut chart (severity distribution), horizontal bar chart (findings by section) β€” powered by Chart.js 4.4.7 +- **Animated UI**: staggered fade-in for cards/KPIs/tables, smooth theme transitions, hover effects with transforms, shimmer loading states, pulse alerts ### ✏️ Terraform Prompt Editor - **Inline prompt editor** accessible from the Terraform menu (3-dot menu β†’ Editar Prompt) @@ -384,14 +387,14 @@ Allow group to read buckets in compartment ``` oci-cis-agent/ β”œβ”€β”€ backend/ -β”‚ β”œβ”€β”€ app.py # FastAPI application (~4250 lines) +β”‚ β”œβ”€β”€ app.py # FastAPI application (~4400 lines) β”‚ β”œβ”€β”€ cis_reports.py # Oracle CIS Benchmark checker (6660 lines, report engine) β”‚ β”œβ”€β”€ mcp_cis_server.py # MCP server with 12 granular CIS tools (~700 lines) β”‚ β”œβ”€β”€ gen_tf_reference.py # OCI Terraform provider resource catalog generator β”‚ β”œβ”€β”€ Dockerfile # Python 3.12 + OCI CLI + Terraform CLI β”‚ └── requirements.txt # Dependencies β”œβ”€β”€ frontend/ -β”‚ └── index.html # SPA with Oracle Cloud theme (~2060 lines) +β”‚ └── index.html # SPA with Oracle Dark Premium theme (~2470 lines) β”œβ”€β”€ nginx/ β”‚ └── default.conf # Reverse proxy config β”œβ”€β”€ docker-compose.yml # Orchestration @@ -559,6 +562,7 @@ oci-cis-agent/ | GET | `/api/reports` | List reports | | GET | `/api/reports/{id}/html` | View HTML report | | GET | `/api/reports/{id}/download` | Download report | +| GET | `/api/reports/{rid}/summary` | Report KPI summary (score, pass/fail, sections) | | GET | `/api/reports/{rid}/files` | List report files by category | | GET | `/api/reports/{rid}/files/{fid}/download` | Download individual report file | @@ -635,7 +639,7 @@ All models include OCID mapping for `us-ashburn-1`. For other regions, use the " | Component | Technology | |-----------|-----------| | Backend | Python 3.12, FastAPI 0.115, Uvicorn | -| Frontend | Vanilla JS SPA, Oracle Cloud UI theme | +| Frontend | Vanilla JS SPA, Oracle Dark Premium theme, Chart.js | | Auth | JWT + TOTP MFA + RBAC | | Database | SQLite (WAL mode) | | OCI SDK | `oci` 2.133.0, `oci-cli` | @@ -704,8 +708,8 @@ Verify the IAM policy `Allow group ... to use generative-ai-family in compartmen **OCI CLI test hangs with passphrase prompt (Docker):** If your private key is encrypted (`ENCRYPTED` in the PEM header), provide the passphrase in the **Key Passphrase** field when saving the credential. Unencrypted keys work without a passphrase. The app automatically detects encrypted keys and blocks upload if no passphrase is provided. -**ADB connection fails:** -Ensure the wallet ZIP contains `tnsnames.ora` and `ewallet.pem`. The DSN must match a service name in `tnsnames.ora` (e.g., `myatp_high`). +**ADB connection fails (`DPY-6005: cannot connect`):** +Ensure the wallet ZIP contains `tnsnames.ora` and `ewallet.pem`. The DSN must match a service name in `tnsnames.ora` (e.g., `myatp_high`). If using an auto-login wallet without a custom password, leave the wallet password field empty β€” the app automatically passes an empty string for `wallet_password` which is required by `python-oracledb` thin mode even for auto-login wallets. **Container won't start:** ```bash diff --git a/frontend/index.html b/frontend/index.html index 2a2d92c..f299188 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -239,6 +239,7 @@ tbody tr:last-child td{border-bottom:none} /* ── Empty States ── */ .emp{text-align:center;padding:2.5rem 1.5rem;color:var(--t4)} .emp .eic{font-size:2.2rem;margin-bottom:.55rem;filter:grayscale(.3)} +.emp .eic svg{width:48px;height:48px} .emp p{line-height:1.55} /* ── Explorer ── */ @@ -630,7 +631,7 @@ function rPg(){switch(S.tab){case'chat':return rChat();case'terraform':return rT /* ── Chat ── */ function rChat(){ - const ms=S.msgs.length===0?'
${IC.bot}

Inicie uma conversa com o agente.

Selecione um modelo para começar.

' + const ms=S.msgs.length===0?`
${IC.bot}

Inicie uma conversa com o agente.

Selecione um modelo para começar.

` :S.msgs.map(m=>`
${fm(m.c)}
${m.t?`
${m.t}
`:''}
`).join(''); const provs={};for(const[mid,info]of Object.entries(S.models)){const p=info.provider||'other';if(!provs[p])provs[p]=[];provs[p].push({id:mid,name:info.name})} const provOrder=['openai','google','meta','xai'];