Decouple reminder from agent import; redesign reminder page layout

agent/agent.go

@@ -508,7 +508,7 @@ const agentToolsDesc = `Available tools (use exact name):
 - weather_forecast: Get weather forecast (args: {"lat":number,"lon":number})
 - places_search: Search for places (args: {"q":"search name","near":"location"})
 - places_nearby: Find places near a location (args: {"address":"location","radius":number})
-- reminder_daily: Get today's daily Islamic reminder with verse, hadith, and name of Allah (no args)
+- reminder: Get today's daily Islamic reminder with verse, hadith, and name of Allah (no args)
 - quran: Look up a Quran chapter or verse (args: {"chapter":1,"verse":1} — verse is optional)
 - hadith: Look up hadith from Sahih Al Bukhari (args: {"book":1} — optional book number)
 - quran_search: Semantic search across the Quran, Hadith, and names of Allah (args: {"q":"what does the quran say about patience"})
@@ -781,7 +781,7 @@ func shortcutToolCalls(prompt string) []shortcutToolCall {
 		"video":    {{Tool: "video_search", Args: map[string]any{"query": "latest"}}},
 		"videos":   {{Tool: "video_search", Args: map[string]any{"query": "latest"}}},
 		"weather":  {{Tool: "weather_forecast", Args: map[string]any{"lat": 51.5074, "lon": -0.1278}}},
-		"reminder": {{Tool: "reminder_daily", Args: map[string]any{}}},
+		"reminder": {{Tool: "reminder", Args: map[string]any{}}},
 		"apps":     {{Tool: "apps_search", Args: map[string]any{}}},
 		// Starter pill phrases
 		"give me a summary of today's top news":         {{Tool: "news", Args: map[string]any{}}},
@@ -790,7 +790,7 @@ func shortcutToolCalls(prompt string) []shortcutToolCall {
 		"find me the latest tech videos":                {{Tool: "video_search", Args: map[string]any{"query": "tech"}}},
 		"what's the weather like in london today?":      {{Tool: "weather_forecast", Args: map[string]any{"lat": 51.5074, "lon": -0.1278}}},
 		"search the web for the latest ai news":         {{Tool: "web_search", Args: map[string]any{"q": "latest AI news"}}},
-		"show me today's islamic reminder":              {{Tool: "reminder_daily", Args: map[string]any{}}},
+		"show me today's islamic reminder":              {{Tool: "reminder", Args: map[string]any{}}},
 	}
 	if tc, ok := aliases[strings.ToLower(strings.TrimSpace(prompt))]; ok {
 		return tc
@@ -829,7 +829,7 @@ func toolLabel(tool string) string {
 		return "📍 Searching places"
 	case "places_nearby":
 		return "📍 Finding nearby places"
-	case "reminder_daily":
+	case "reminder":
 		return "📿 Getting daily reminder"
 	case "search":
 		return "🔍 Searching Mu"
@@ -1158,7 +1158,7 @@ func formatToolResult(toolName, result string, args map[string]any) string {
 		return formatVideoResult(result)
 	case "weather_forecast":
 		return formatWeatherResult(result)
-	case "reminder_daily":
+	case "reminder":
 		return formatReminderResult(result)
 	case "search":
 		return formatSearchResult(result)

internal/api/mcp.go

@@ -311,7 +311,7 @@ var tools = []Tool{
 		},
 	},
 	{
-		Name:        "reminder_daily",
+		Name:        "reminder",
 		Description: "Get today's daily Islamic reminder with verse, hadith, and name of Allah",
 		Handle: func(args map[string]any) (string, error) {
 			client := &http.Client{Timeout: 10 * time.Second}

internal/app/html/mu.css

@@ -1858,6 +1858,41 @@ a.highlight {
   max-height: 200px;
 }
 
+/* Reminder page */
+.reminder-message {
+  font-size: 1.1em;
+  line-height: 1.6;
+  margin-bottom: 1.5em;
+  color: #333;
+}
+
+.reminder-section {
+  margin-bottom: 1.5em;
+}
+
+.reminder-section h3 {
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #888;
+  margin: 0 0 0.5em;
+}
+
+.reminder-section blockquote {
+  margin: 0;
+  padding: 0.75em 1em;
+  border-left: 3px solid #ddd;
+  color: #444;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.reminder-section p {
+  margin: 0;
+  line-height: 1.6;
+  color: #444;
+}
+
 .video {
   position: relative;
   padding-bottom: 56.25%;

reminder/reminder.go

@@ -134,17 +134,34 @@ func Handler(w http.ResponseWriter, r *http.Request) {
 	}
 
 	var content string
-	if rd.Verse != "" {
-		content += fmt.Sprintf(`<div class="item"><div class="verse">%s</div></div>`, rd.Verse)
+
+	// Message first — the daily reflection
+	if rd.Message != "" {
+		content += fmt.Sprintf(`<div class="reminder-message"><p>%s</p></div>`, rd.Message)
 	}
-	if rd.Name != "" {
-		content += fmt.Sprintf(`<div class="item"><strong>Name of Allah</strong><p>%s</p></div>`, rd.Name)
+
+	// Verse
+	if rd.Verse != "" {
+		content += `<div class="reminder-section">`
+		content += `<h3>Quran</h3>`
+		content += fmt.Sprintf(`<blockquote>%s</blockquote>`, rd.Verse)
+		content += `</div>`
 	}
+
+	// Hadith
 	if rd.Hadith != "" {
-		content += fmt.Sprintf(`<div class="item"><strong>Hadith</strong><div class="verse">%s</div></div>`, rd.Hadith)
+		content += `<div class="reminder-section">`
+		content += `<h3>Hadith</h3>`
+		content += fmt.Sprintf(`<blockquote>%s</blockquote>`, rd.Hadith)
+		content += `</div>`
 	}
-	if rd.Message != "" {
-		content += fmt.Sprintf(`<div class="item"><p>%s</p></div>`, rd.Message)
+
+	// Name of Allah
+	if rd.Name != "" {
+		content += `<div class="reminder-section">`
+		content += `<h3>Name of Allah</h3>`
+		content += fmt.Sprintf(`<p>%s</p>`, rd.Name)
+		content += `</div>`
 	}
 
 	html := app.RenderHTMLForRequest("Daily Reminder", "Today's Islamic reminder with verse, hadith, and name of Allah", content, r)