scheduler/public/index.html

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Schedules • Task & Workflow Manager</title>

	<link rel="stylesheet" href="style.css" />
	<link rel="stylesheet" href="modelList.css" />
	<link rel="stylesheet" href="toolList.css" />
	<link rel="stylesheet" href="featureList.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.4.1/jsoneditor.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.4.1/jsoneditor.min.js"></script>
</head>

<body>
	<!-- app shell header -->
	<header class="app-header">
		<div class="brand">
			<div class="logo" aria-hidden="true">⏱️</div>
			<div class="titles">
				<h1>Schedules</h1>
				<p class="subtitle">manage your tasks and follow‑ups</p>
			</div>
		</div>

		<!-- theme toggle kept with same ids so your code still works -->
		<button id="themeToggle" class="theme-toggle card compact" aria-pressed="false" title="toggle dark / light">
			<span id="themeToggleIcon" aria-hidden="true">🌙</span>
			<span id="themeToggleLabel">Dark</span>
		</button>
	</header>

	<!-- content grid -->
	<main class="content-grid">
		<!-- left column: auth + run now -->
		<aside class="stack col-left">
			<!-- user summary card (shows when logged in) -->
			<section class="card user-card" id="userCard" aria-hidden="true">
				<header class="card-header">
					<h2 style="margin-top: 0px;">Account</h2>
				</header>

				<div class="user-compact">
					<img id="userAvatar" class="avatar" src="" alt="" aria-hidden="true" />
					<div class="user-info">
						<div id="userName" class="user-name muted">not logged in</div>
						<div id="userEmail" class="muted user-email"></div>
						<div id="userRole" class="muted user-role"></div>
					</div>
				</div>

				<!-- permissions summary -->
				<div id="userPermissions" class="permissions" aria-live="polite" hidden>
					<h3 class="small">Permissions</h3>
					<ul class="perms-list">
						<li>
							<span class="perm-key">Workspace</span>
							<ul class="nested-perms">
								<li>
									<span class="perm-val" data-perm="workspace.tools"></span>
									<span class="perm-key">Tools</span>
								</li>
							</ul>
						</li>
						<li>
							<span class="perm-key">Chat</span>
							<ul class="nested-perms">
								<li>
									<span class="perm-val" data-perm="chat.file_upload"></span>
									<span class="perm-key">File Upload</span>
								</li>
							</ul>
						</li>
						<li>
							<span class="perm-key">Features</span>
							<ul class="nested-perms">
								<li>
									<span class="perm-val" data-perm="features.web_search"></span>
									<span class="perm-key">Web Search</span>
								</li>
								<li>
									<span class="perm-val" data-perm="features.code_interpreter"></span>
									<span class="perm-key">Code Interpreter</span>
								</li>
							</ul>
						</li>
					</ul>
				</div>

				<div class="actions">
					<button id="userLogoutBtn" aria-variant="danger">Logout</button>
				</div>
			</section>

			<!-- login card (ids preserved) -->
			<section class="card" id="auth">
				<header class="card-header">
					<h2>login</h2>
					<p class="muted">enter your open webui user id (uuid). this is sent as the <code
							class="inline">x-user-id</code> header on api requests.</p>
				</header>

				<!-- Login panel -->
				<section class="auth-card">
					<h2>Login</h2>
					<p id="authStatus" role="status">not logged in</p>

					<form id="loginForm" autocomplete="off">
						<label>
							Username
							<input id="username" name="username" required />
						</label>

						<label>
							Password
							<input id="password" name="password" type="password" required />
						</label>

						<div class="row actions">
							<button type="submit">Login</button>
							<button type="button" id="logoutBtn">Logout</button>
						</div>
					</form>
				</section>
			</section>
		</aside>

		<!-- right column: schedules + create/update -->
		<section class="stack col-right">
			<!-- schedules list -->
			<section class="card">
				<header class="card-header actions between">
					<h2>your schedules</h2>
					<div class="actions">
						<button id="refreshBtn">refresh</button>
					</div>
				</header>
				<p id="listStatus" class="muted" aria-live="polite"></p>

				<div class="table-wrap" role="region" aria-label="schedules table" tabindex="0">
					<table>
						<thead>
							<tr>
								<th scope="col">name</th>
								<th scope="col">schedules</th>
								<th scope="col">start</th>
								<th scope="col">template</th>
								<th scope="col">prompt</th>
								<th scope="col">one-shot</th>
								<th scope="col">actions</th>
							</tr>
						</thead>
						<tbody id="schedulesTbody"></tbody>
					</table>
				</div>
			</section>

			<!-- create/update schedule -->
			<section class="card">
				<header class="card-header">
					<h2>create / update schedule</h2>
				</header>

				<form id="createForm" class="form-stack">
					<div class="row">
						<div>
							<label for="name">name</label>
							<input id="name" name="name" type="text" required placeholder="daily-report" />
						</div>

						<div class="row">
							<div>
								<label for="templateName">workflow template</label>
								<input id="templateName" name="templateName" type="text" required
									placeholder="report-template" />
							</div>
						</div>
					</div>

					<div class="row">
						<div>
							<label for="startAt">start at (optional)</label>
							<input id="startAt" name="startAt" type="datetime-local" />
						</div>
						<div>
							<label for="cron">cron (min hour day month day-of-week) *</label>
							<input id="cron" name="cron" type="text" placeholder="30 9 * * *" />
							<div id="cronError"></div>
						</div>

						<div style="justify-content: center; height: 100%;">
							<div class="warning-box">
								<!-- exclamation icon -->
								<svg class="warning-icon" viewBox="0 0 24 24" aria-hidden="true">
									<path
										d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-13h-2v6h2V7zm0 8h-2v2h2v-2z" />
								</svg>
								<span>Cron is in EST (America/New_York)</span>
							</div>
						</div>

						<div>
							<label for="params">parameters (json object)</label>
							<div id="params" name="params" placeholder=''></div>
						</div>

						<div>
							<div class="label">Run Settings</div>
							<ul class="row">
								<li class="checkbox">
									<label>
										<input id="clusterScope" type="checkbox" /> template is cluster-scoped
									</label>
								</li>
								<li class="checkbox">
									<label>
										<input id="oneShot" type="checkbox" /> stop after first success (one-shot)
									</label>
								</li>
							</ul>

							<details class="templates">
								<summary class="muted">available workflow templates</summary>
								<ul id="templatesUl" class="muted"></ul>
							</details>
						</div>
					</div>

					<div class="row">
						<div>
							<label for="model-select">Model</label>
							<select id="model-select" name="model">
								<option value="">choose a model</option>
							</select>
							<button id="selected-model-card" type="button" class="selected-model-card" hidden></button>
						</div>
						<div>
							<label id="tools-select-label">Tools</label>
							<div id="tools-select" class="tool-pill-group" role="listbox"
								aria-labelledby="tools-select-label" aria-multiselectable="true"></div>
							<input type="hidden" id="tools-select-input" name="tools" value="" />

							<section class="feature-section" aria-labelledby="features-select-label">
								<header class="feature-section-header">
									<h3 id="features-select-label">Features</h3>
									<p class="muted">Toggle optional capabilities for the run.</p>
								</header>
								<div id="features-select" class="feature-pill-group" role="listbox"
									aria-labelledby="features-select-label" aria-multiselectable="true"></div>
								<input type="hidden" id="features-select-input" name="features" value="{}" />
							</section>
						</div>
					</div>

					<section class="form-subsection">
						<h3>Prompt</h3>
						<p class="muted" style="margin-top: 0;">Supports Markdown formatting.</p>
						<textarea id="prompt" name="prompt" placeholder="Write your prompt in Markdown..."
							rows="10"></textarea>
					</section>

					<section class="form-subsection">
						<h3>Attachments</h3>
						<p class="muted" style="margin-top: 0;">Optional files are uploaded with the schedule and shared with the run.</p>
						<label class="file-input">
							<span class="file-input-label">Select file(s)</span>
							<input type="file" id="scheduleFiles" name="scheduleFiles" multiple />
						</label>
						<ul id="scheduleFilesList" class="file-list"></ul>
					</section>

					<div>
						<hr style="width: 100%;">

						<div class="actions between wrap">
							<div class="actions">
								<button type="submit">upsert schedule</button>
								<button type="button" id="loadTemplatesBtn" aria-variant="ghost">load workflow
									templates</button>
							</div>
							<span id="createStatus" class="muted" aria-live="polite"></span>
						</div>
					</div>
				</form>
			</section>
		</section>
	</main>

	<!-- scripts -->
	<script src="modelList.js"></script>
	<script src="toolList.js"></script>
	<script src="featureList.js"></script>
	<script src="script.js" defer></script>
</body>

</html>