Skip to content

Mobile-first index.html rewrite, add smoke-test script and run in Pages workflow#12

Open
Huỳnh Thương (Huynhthuongg) wants to merge 5 commits into
mainfrom
codex/review-code-and-propose-fixes-1ual7c
Open

Mobile-first index.html rewrite, add smoke-test script and run in Pages workflow#12
Huỳnh Thương (Huynhthuongg) wants to merge 5 commits into
mainfrom
codex/review-code-and-propose-fixes-1ual7c

Conversation

@Huynhthuongg

@Huynhthuongg Huỳnh Thương (Huynhthuongg) commented Jun 4, 2026

Copy link
Copy Markdown
Member

Motivation

  • Convert the static UI to a mobile-first, Vietnamese-friendly single-file app with updated visuals, icons, and simplified routes to match the RKIX3 mobile shell design.
  • Add an automated smoke test to catch common regressions in the static site (missing routes, unsafe innerHTML, JS syntax errors) before deploying to GitHub Pages.
  • Small docs and workflow fixes (README and hadolint comment) to reflect the new smoke-test step.

Description

  • Rewrote index.html to a mobile-first layout: changed lang to vi, updated metadata/title, replaced desktop layout with a compact mobile-shell, added inline SVG icons, accessible attributes, and UI/UX improvements while ensuring chat messages are escaped before insertion via esc(...).
  • Introduced scripts/smoke-test-static.mjs which asserts presence of required route containers, mobile layout overflow rules, bottom nav tap targets, chat input/send controls, escaping of chat messages, and runs a node --check syntax validation on inline scripts.
  • Updated .github/workflows/static.yml to run the smoke test step node scripts/smoke-test-static.mjs during the build job before preparing and uploading the _site artifact.
  • Updated README.md to reference the smoke test and added a small example project tree entry for the new script, and fixed a typo in .github/workflows/hadolint.yml comment.

Testing

  • Ran the static smoke test locally with node scripts/smoke-test-static.mjs, and the script completed successfully (no failures reported).
  • The smoke test also validated inline JavaScript via Node's --check mode and reported no syntax errors.

Codex Task


Summary by cubic

Rewrote the static app into a mobile-first, Vietnamese single-file UI and added a smoke test to block regressions before GitHub Pages deploys. Improves mobile UX, ensures escaped chat rendering, and tightens CI with workflow fixes, including the SLSA release trigger and output.

  • New Features

    • Mobile-first index.html: lang="vi", updated metadata, compact mobile shell, enlarged fixed bottom nav (64px tap targets, safe-area insets), inline SVG icons, and a11y tweaks.
    • Safe chat rendering: user messages are escaped via esc(...).
    • Smoke test scripts/smoke-test-static.mjs: asserts required routes, prevents horizontal overflow, verifies fixed bottom nav/tap targets, requires chat input/send, forbids raw innerHTML, and runs Node --check on inline scripts.
    • CI/docs: .github/workflows/static.yml runs the smoke test before building _site; README documents the test.
  • Bug Fixes

    • Pin actions/first-interaction to v1.3.0 commit SHA in greetings.yml.
    • Fix GKE workflow trigger in google.yml by using branch main.
    • SLSA generator: trigger on release published and reference steps.hash.outputs.hashes in outputs.
    • Correct hadolint workflow comment typo.

Written for commit 55839d2. Summary will update on new commits.

Review in cubic

@qodo-code-review

Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

@vercel

vercel Bot commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
agents-rkix3 Ready Ready Preview, Comment, Open in v0 Jun 4, 2026 4:21pm

@coderabbitai

coderabbitai Bot commented Jun 4, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

PR này thay thế toàn bộ giao diện index.html từ mô hình dashboard sang mobile-first, thêm script kiểm thử tự động để xác thực cấu trúc HTML/JavaScript mới, tích hợp smoke test vào CI/CD workflow, và cập nhật tài liệu hướng dẫn. Cây cấu trúc, CSS styling, JavaScript behavior được thiết kế lại hoàn toàn; tài liệu và lỗi nhỏ cũng được sửa.

Changes

Mobile-First UI Redesign và Smoke Test Infrastructure

Layer / File(s) Summary
HTML Structure: Mobile Shell Layout
index.html
Cấu trúc body được đổi từ dashboard/sidebar cũ sang khung app mobile: thêm aside.desktop-rail, main.mobile-shell với topbar, 5 section rỗng cho routing (home/ai/workspace/code/profile), drawer, bottom navigation.
Mobile-First Styling: Theme, Layout, Responsive
index.html
Phần <head> được thiết kế lại với CSS variables theme tối, layout mobile (app frame, topbar, mobile pages, chat UI, drawer, bottom nav), media query ≥900px để toggle desktop rail và ẩn bottom nav.
JavaScript Behavior: Navigation, Chat, State Management
index.html
Khởi tạo icon sets, 5 routes tiếng Việt, quick actions, entities (messages/projects); tái cấu trúc render functions thành renderHome/renderAI/renderWorkspace/renderCode/renderProfile/renderChat; setRoute() toggle active state, đóng drawer, reset scroll; bind() xử lý routing click và chat submit; init() inject icons, build nav drawer/bottom nav, register hashchange listener.
Smoke Test: DOM Validation và JavaScript Syntax Check
scripts/smoke-test-static.mjs
Script mới kiểm tra doctype, route sections, mobile CSS constraints, chat input/send elements; xác thực chat message escaping (no raw innerHTML); trích xuất inline scripts, viết temp file, chạy node --check để kiểm tra syntax; in lỗi hoặc thành công.
CI/CD Integration: Smoke Test Step
.github/workflows/static.yml
Thêm bước "Smoke test static app" chạy node scripts/smoke-test-static.mjs trước prepare/upload Pages artifact trong build job.
Documentation and Minor Fixes
.github/workflows/hadolint.yml, README.md
Sửa typo "hadoint" → "hadolint"; cập nhật README phần "Kiến trúc nhanh" (mention smoke test), bổ sung section "Kiểm thử", mở rộng "Deploy GitHub Pages" thành multi-step với smoke test, update roadmap.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

🐰 Lòng thỏ nhảy vui với giao diện mới,
Mobile-first được thiết kế tròn trịa,
Smoke test canh giữ từng dòng code,
Từ điện thoại tới desktop, chẳng sợ gặp bão,
Workflow tích hợp, tất cả đều tốt! 📱✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed Tiêu đề chính xác phản ánh các thay đổi chính của PR: viết lại index.html theo mobile-first, thêm script smoke-test, và chạy trong workflow Pages.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description check ✅ Passed Mô tả pull request liên quan chặt chẽ đến changeset, chi tiết rõ ràng các thay đổi về mobile-first UI, smoke test, và cập nhật workflow/documentation.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch codex/review-code-and-propose-fixes-1ual7c
✨ Simplify code
  • Create PR with simplified code
  • Commit simplified code in branch codex/review-code-and-propose-fixes-1ual7c
  • 🛠️ Aethon

Warning

Review ran into problems

🔥 Problems

Linked repositories: Your configuration references 1 linked repositories, but your current plan allows 0. Analyzed ``, skipped Aethon/backend-api.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@kilo-code-bot

kilo-code-bot Bot commented Jun 4, 2026

Copy link
Copy Markdown

Kilo Code Review could not run — your account is out of credits.

Add credits or switch to a free model to enable reviews on this change.

@Huynhthuongg Huỳnh Thương (Huynhthuongg) added bug Something isn't working documentation Improvements or additions to documentation duplicate This issue or pull request already exists enhancement New feature or request help wanted Extra attention is needed good first issue Good for newcomers invalid This doesn't seem right question Further information is requested v0 labels Jun 4, 2026
@Huynhthuongg Huỳnh Thương (Huynhthuongg) linked an issue Jun 4, 2026 that may be closed by this pull request

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5868608f5a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "Codex (@codex) review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "Codex (@codex) address that feedback".

Comment thread index.html

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/static.yml:
- Around line 25-27: The workflow step named "Smoke test static app" runs node
scripts/smoke-test-static.mjs without pinning Node; add an actions/setup-node
step before that step to install a specific Node version (use node-version: 20
to match other workflows) so scripts/smoke-test-static.mjs runs with a
consistent runtime; ensure the setup step appears before the "Smoke test static
app" run step and uses actions/setup-node@v3 (or current stable) with
node-version: 20.

In `@index.html`:
- Around line 219-221: The three non-submit buttons (the element with id
"mobileMenu", the element with class "login-button", and the other icon button
with class "icon-button") are missing explicit type attributes and default to
"submit"; add type="button" to each of these button elements so they do not
trigger form submission if ever placed inside a form.
- Around line 262-264: The routing currently disables deep-linking/back-forward
because setRoute (used in bind on click) does not update location.hash and init
immediately calls history.replaceState(location.pathname) which clears the hash;
fix by making setRoute update location.hash to the route id (e.g., location.hash
= '#'+id) instead of only manipulating DOM, adjust the click handler in bind to
let hashchange drive view changes (call setRoute only from the hashchange
listener or avoid calling setRoute directly after setting location.hash), and
remove or relocate the history.replaceState(...) that erases the hash in init so
you preserve hashes for navigation and deep links; refer to the functions
setRoute, bind, init and the history.replaceState call when making changes.
- Line 264: The init function relies on implicit global DOM variables
bottomNav/sideNav/drawerNav (via element IDs) which is fragile; update init to
explicitly query and cache those elements (e.g., const bottomNav =
document.getElementById('bottomNav') or document.querySelector(...)) before
using bottomNav.innerHTML/sideNav.innerHTML/drawerNav.innerHTML and any later
references (renderHome/renderAI/renderWorkspace/renderCode/renderProfile/bind
may assume they exist), and guard against null by throwing or returning early if
any element is not found.

In `@scripts/smoke-test-static.mjs`:
- Around line 30-39: Hiện đoạn tạo và kiểm tra script tạm (scripts.length,
mkdtempSync -> workDir, scriptPath, writeFileSync, spawnSync) có thể throw trước
khi rmSync được gọi; sửa bằng cách bọc tạo/ghi và spawnSync vào một khối try and
đặt rmSync(workDir, { recursive: true, force: true }) trong finally để luôn
cleanup thư mục tạm even khi có exception.
- Around line 24-25: The current smoke test assertions in
scripts/smoke-test-static.mjs only check for a specific literal
`<p>${m.text}</p>` which is too narrow; update the test that uses the
variables/html string (the assertions checking html.includes(...)) to detect any
unescaped interpolation of m.text into innerHTML by replacing the single-pattern
check with a broader check (e.g., use a regex or string search against patterns
like `${m.text}` appearing inside HTML tags or assignments to innerHTML) and
keep the existing assert that escaped content (esc(m.text)) is present; target
the two assertions around html/includes to ensure any direct `${m.text}`
interpolation into rendered HTML is rejected, not just the `<p>` case.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 80810a30-292e-48bb-a338-041a087a1e24

📥 Commits

Reviewing files that changed from the base of the PR and between d780655 and 5868608.

📒 Files selected for processing (5)
  • .github/workflows/hadolint.yml
  • .github/workflows/static.yml
  • README.md
  • index.html
  • scripts/smoke-test-static.mjs

Comment thread .github/workflows/static.yml
Comment thread index.html
Comment thread index.html
Comment thread index.html
Comment thread scripts/smoke-test-static.mjs
Comment thread scripts/smoke-test-static.mjs
@github-project-automation github-project-automation Bot moved this from Ready to In progress in @Huynhthuongg's untitled project Jun 4, 2026

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 issues found across 5 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name=".github/workflows/static.yml">

<violation number="1" location=".github/workflows/static.yml:26">
P2: The workflow runs `node scripts/smoke-test-static.mjs` without a `setup-node` step, relying on the runner's pre-installed Node version which can change without notice. Add `actions/setup-node@v4` with a pinned `node-version` (e.g., 20) before this step to ensure consistent behavior, consistent with other workflows in this repo.</violation>
</file>

Reply with feedback, questions, or to request a fix.

Re-trigger cubic

Comment thread index.html
Comment thread .github/workflows/static.yml
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Signed-off-by: Huỳnh Thương <252359928+Huynhthuongg@users.noreply.github.com>
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Signed-off-by: Huỳnh Thương <252359928+Huynhthuongg@users.noreply.github.com>
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Signed-off-by: Huỳnh Thương <252359928+Huynhthuongg@users.noreply.github.com>
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Signed-off-by: Huỳnh Thương <252359928+Huynhthuongg@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working codex documentation Improvements or additions to documentation duplicate This issue or pull request already exists enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed invalid This doesn't seem right question Further information is requested v0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RKIX3

1 participant