Add Swagger/OpenAPI documentation to server endpoints & enhance feature carousel and add GitHub star history section in index.html

[hoangsonww]

No description provided.

[gemini-code-assist]

Code Review

This pull request introduces a GitHub Star History section, enhances the carousel's responsive design, and updates documentation links to absolute GitHub URLs. Review feedback highlights that switching to absolute URLs for documentation may hinder offline accessibility and suggests increasing the carousel's auto-rotation delay to improve readability for technical content.

[gemini-code-assist]

Changing these documentation links from relative paths to absolute GitHub URLs contradicts the 'Local-first' and 'No external services required' philosophy stated in the project's core description (lines 601, 607, and 721). If a user is running the dashboard in an offline or restricted environment, they will no longer be able to access the documentation. Additionally, hardcoding the master branch is a maintenance risk. It is recommended to keep these links relative to ensure they work in all environments.

Suggested change

	<a href="https://github.com/hoangsonww/Claude-Code-Agent-Monitor/blob/master/README.md">README</a>
	<a href="https://github.com/hoangsonww/Claude-Code-Agent-Monitor/blob/master/ARCHITECTURE.md">Architecture</a>
	<a href="https://github.com/hoangsonww/Claude-Code-Agent-Monitor/blob/master/INSTALL.md">Install</a>
	<a href="https://github.com/hoangsonww/Claude-Code-Agent-Monitor/blob/master/SETUP.md">Setup</a>
	<a href="README.md">README</a>
	<a href="ARCHITECTURE.md">Architecture</a>
	<a href="INSTALL.md">Install</a>
	<a href="SETUP.md">Setup</a>

[gemini-code-assist]

The AUTO_DELAY has been reduced to 2500ms. Since the carousel cards contain detailed technical descriptions (some exceeding 50 words, such as the 'History Import' card), this interval is likely too short for users to read the content before the slide changes. Consider increasing this to at least 4000ms-5000ms to improve readability and accessibility.

Suggested change

	var AUTO_DELAY = 2500;
	var AUTO_DELAY = 5000;

[Copilot]

Pull request overview

Updates the project wiki landing page to improve the feature carousel experience on smaller screens and add a new “GitHub Star History” section to highlight repository growth.

Changes:

• Tweaks feature carousel controls and responsive styling (including autoplay timing and breakpoints).
• Adds a “GitHub Star History” section with an embedded Star History chart and CTA link.
• Replaces local documentation links with GitHub-hosted documentation URLs and updates footer link labeling.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

.star-history-link is a focusable interactive element nested inside .screenshot-card/.star-history-card which both use overflow: hidden. This can clip the browser’s default focus outline, making keyboard focus hard to see. Add an explicit :focus-visible (or .star-history-card:focus-within) style that draws an inset outline/box-shadow and consider avoiding line-height: 0/double overflow: hidden if it interferes with focus rendering.

Suggested change

	background: transparent;
	}
	.star-history-card {
	border-color: rgba(129, 140, 248, 0.32);
	background: linear-gradient(180deg, rgba(22, 22, 34, 0.98), rgba(13, 13, 23, 0.98));
	}
	background: transparent;
	position: relative;
	}
	.star-history-link:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px rgba(129, 140, 248, 0.9);
	}
	.star-history-card {
	border-color: rgba(129, 140, 248, 0.32);
	background: linear-gradient(180deg, rgba(22, 22, 34, 0.98), rgba(13, 13, 23, 0.98));
	}
	.star-history-card:focus-within {
	box-shadow: inset 0 0 0 3px rgba(129, 140, 248, 0.55);
	}

[Copilot]

The carousel auto-advances every 2500ms now. For accessibility, consider disabling autoplay (or significantly slowing it) when prefers-reduced-motion: reduce is set, and/or pausing autoplay while any carousel control has focus (keyboard users can otherwise have the content moving under them). This can be handled in startAuto() / the initial startAuto() call by checking window.matchMedia('(prefers-reduced-motion: reduce)').

Suggested change

	var AUTO_DELAY = 2500;
	var GAP = 12;
	var reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
	var AUTO_DELAY = reducedMotionQuery.matches ? 10000 : 2500;
	var GAP = 12;
	var autoplayPausedByFocus = false;
	function shouldAutoPlay() {
	return !reducedMotionQuery.matches && !autoplayPausedByFocus;
	}
	function handleReducedMotionChange(event) {
	AUTO_DELAY = event.matches ? 10000 : 2500;
	if (autoInterval) {
	clearInterval(autoInterval);
	autoInterval = null;
	}
	if (shouldAutoPlay()) {
	startAuto();
	}
	}
	if (typeof reducedMotionQuery.addEventListener === "function") {
	reducedMotionQuery.addEventListener("change", handleReducedMotionChange);
	} else if (typeof reducedMotionQuery.addListener === "function") {
	reducedMotionQuery.addListener(handleReducedMotionChange);
	}
	carousel.addEventListener("focusin", function () {
	autoplayPausedByFocus = true;
	if (autoInterval) {
	clearInterval(autoInterval);
	autoInterval = null;
	}
	});
	carousel.addEventListener("focusout", function () {
	window.setTimeout(function () {
	autoplayPausedByFocus = carousel.contains(document.activeElement);
	if (!autoplayPausedByFocus && shouldAutoPlay()) {
	startAuto();
	}
	}, 0);
	});