Add help dialog and tooltip indicators throughout the UI

- Add circled ? help button in TopBar that opens a dialog with HOW-TO-USE.md content
- Create reusable Tooltip component with viewport-aware positioning
- Add 32 tooltip indicators across project config and settings panels
- Covers backend selection, Bedrock/Ollama/LiteLLM fields, Docker, AWS, MCP, and more

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/src/components/settings/AwsSettings.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { useSettings } from "../../hooks/useSettings";
 import * as commands from "../../lib/tauri-commands";
+import Tooltip from "../ui/Tooltip";
 
 export default function AwsSettings() {
   const { appSettings, saveSettings } = useSettings();
@@ -56,7 +57,7 @@ export default function AwsSettings() {
 
         {/* AWS Config Path */}
         <div>
-          <span className="text-[var(--text-secondary)] text-xs block mb-1">AWS Config Path</span>
+          <span className="text-[var(--text-secondary)] text-xs block mb-1">AWS Config Path<Tooltip text="Path to your AWS config/credentials directory. Mounted into containers for Bedrock auth." /></span>
           <div className="flex gap-2">
             <input
               type="text"
@@ -80,7 +81,7 @@ export default function AwsSettings() {
 
         {/* AWS Profile */}
         <div>
-          <span className="text-[var(--text-secondary)] text-xs block mb-1">Default Profile</span>
+          <span className="text-[var(--text-secondary)] text-xs block mb-1">Default Profile<Tooltip text="AWS named profile to use by default. Per-project settings can override this." /></span>
           <select
             value={globalAws.aws_profile ?? ""}
             onChange={(e) => handleChange("aws_profile", e.target.value)}
@@ -95,7 +96,7 @@ export default function AwsSettings() {
 
         {/* AWS Region */}
         <div>
-          <span className="text-[var(--text-secondary)] text-xs block mb-1">Default Region</span>
+          <span className="text-[var(--text-secondary)] text-xs block mb-1">Default Region<Tooltip text="Default AWS region for Bedrock API calls (e.g. us-east-1). Can be overridden per project." /></span>
           <input
             type="text"
             value={globalAws.aws_region ?? ""}

app/src/components/settings/DockerSettings.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useDocker } from "../../hooks/useDocker";
 import { useSettings } from "../../hooks/useSettings";
 import type { ImageSource } from "../../lib/types";
+import Tooltip from "../ui/Tooltip";
 
 const REGISTRY_IMAGE = "repo.anhonesthost.net/cybercovellc/triple-c/triple-c-sandbox:latest";
 
@@ -87,7 +88,7 @@ export default function DockerSettings() {
 
         {/* Image Source Selector */}
         <div>
-          <span className="text-[var(--text-secondary)] text-xs block mb-1.5">Image Source</span>
+          <span className="text-[var(--text-secondary)] text-xs block mb-1.5">Image Source<Tooltip text="Registry pulls the pre-built image. Local Build compiles from the bundled Dockerfile. Custom lets you specify any image." /></span>
           <div className="flex gap-1">
             {IMAGE_SOURCE_OPTIONS.map((opt) => (
               <button
@@ -109,7 +110,7 @@ export default function DockerSettings() {
         {/* Custom image input */}
         {imageSource === "custom" && (
           <div>
-            <span className="text-[var(--text-secondary)] text-xs block mb-1">Custom Image</span>
+            <span className="text-[var(--text-secondary)] text-xs block mb-1">Custom Image<Tooltip text="Full image name including registry and tag (e.g. myregistry.com/image:tag)." /></span>
             <input
               type="text"
               value={customInput}

app/src/components/settings/SettingsPanel.tsx

@@ -7,6 +7,7 @@ import ClaudeInstructionsModal from "../projects/ClaudeInstructionsModal";
 import EnvVarsModal from "../projects/EnvVarsModal";
 import { detectHostTimezone } from "../../lib/tauri-commands";
 import type { EnvVar } from "../../lib/types";
+import Tooltip from "../ui/Tooltip";
 
 export default function SettingsPanel() {
   const { appSettings, saveSettings } = useSettings();
@@ -59,7 +60,7 @@ export default function SettingsPanel() {
 
       {/* Container Timezone */}
       <div>
-        <label className="block text-sm font-medium mb-1">Container Timezone</label>
+        <label className="block text-sm font-medium mb-1">Container Timezone<Tooltip text="Sets the timezone inside containers. Affects scheduled task timing and log timestamps." /></label>
         <p className="text-xs text-[var(--text-secondary)] mb-1.5">
           Timezone for containers — affects scheduled task timing (IANA format, e.g. America/New_York)
         </p>
@@ -79,7 +80,7 @@ export default function SettingsPanel() {
 
       {/* Global Claude Instructions */}
       <div>
-        <label className="block text-sm font-medium mb-1">Claude Instructions</label>
+        <label className="block text-sm font-medium mb-1">Claude Instructions<Tooltip text="Global instructions applied to all projects. Written to ~/.claude/CLAUDE.md in every container." /></label>
         <p className="text-xs text-[var(--text-secondary)] mb-1.5">
           Global instructions applied to all projects (written to ~/.claude/CLAUDE.md in containers)
         </p>
@@ -98,7 +99,7 @@ export default function SettingsPanel() {
 
       {/* Global Environment Variables */}
       <div>
-        <label className="block text-sm font-medium mb-1">Global Environment Variables</label>
+        <label className="block text-sm font-medium mb-1">Global Environment Variables<Tooltip text="Env vars injected into all containers. Per-project vars with the same key take precedence." /></label>
         <p className="text-xs text-[var(--text-secondary)] mb-1.5">
           Applied to all project containers. Per-project variables override global ones with the same key.
         </p>
@@ -117,7 +118,7 @@ export default function SettingsPanel() {
 
       {/* Updates section */}
       <div>
-        <label className="block text-sm font-medium mb-2">Updates</label>
+        <label className="block text-sm font-medium mb-2">Updates<Tooltip text="Check for new versions of the Triple-C app and container image." /></label>
         <div className="space-y-2">
           {appVersion && (
             <p className="text-xs text-[var(--text-secondary)]">