223 lines
11 KiB
HTML
223 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Assistant - Advanced Settings</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="app-header">
|
|
<h3>Advanced Settings</h3>
|
|
<button id="closeSettings" class="icon-button" title="Close">✖</button>
|
|
</div>
|
|
|
|
<details class="panel-group" open>
|
|
<summary>General</summary>
|
|
<div class="active-state-section">
|
|
<label>
|
|
<input type="checkbox" id="advancedModeToggle">
|
|
Enable advanced mode
|
|
</label>
|
|
<div class="status-message">
|
|
Advanced mode unlocks integrations, webhook tests, and developer tooling.
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="panel-group">
|
|
<summary>Webhooks</summary>
|
|
<div class="context-section">
|
|
<input type="text" id="webhookUrl" placeholder="https://example.com/webhook">
|
|
<textarea id="webhookPayload" class="code-input" placeholder='Custom payload JSON (optional)'></textarea>
|
|
<label class="summary-save-toggle">
|
|
<input type="checkbox" id="debugModeToggle">
|
|
Enable debug output
|
|
</label>
|
|
<div class="status-message" id="webhookStatus"></div>
|
|
<button id="testWebhook">Send Test Payload</button>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="panel-group">
|
|
<summary>MCP Connection</summary>
|
|
<div class="context-section">
|
|
<input type="text" id="mcpServerUrl" placeholder="http://localhost:3000">
|
|
<div class="mcp-key-row">
|
|
<input type="password" id="mcpApiKey" placeholder="MCP API key (optional)">
|
|
<button id="toggleMcpKey" type="button">Show</button>
|
|
</div>
|
|
<div class="status-message" id="mcpStatus"></div>
|
|
<button id="testMcp">Test MCP Connection</button>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="panel-group">
|
|
<summary>Cloud Sync (Optional)</summary>
|
|
<div class="context-section">
|
|
<input type="text" id="cloudProvider" placeholder="Supabase / S3 / Custom">
|
|
<input type="text" id="cloudEndpoint" placeholder="https://your-cloud-endpoint">
|
|
<div class="status-message" id="cloudStatus"></div>
|
|
<button id="testCloud">Validate Cloud Config</button>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="panel-group">
|
|
<summary>Google Calendar (via MCP)</summary>
|
|
<div class="context-section">
|
|
<input type="text" id="gcalToolName" placeholder="Tool name (e.g. google.calendar.listEvents)">
|
|
<input type="text" id="gcalCalendarId" placeholder="Calendar ID (default: primary)">
|
|
<input type="text" id="gcalMaxResults" placeholder="Max results (default: 5)">
|
|
<div class="status-message" id="gcalStatus"></div>
|
|
<button id="fetchCalendar">Fetch Upcoming Meetings</button>
|
|
<pre id="gcalOutput"></pre>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="panel-group">
|
|
<summary>MCP Tools (Preview)</summary>
|
|
<div class="context-section">
|
|
<button id="refreshMcpTools">Fetch Tools</button>
|
|
<span id="mcpToolsStatus" class="status-message"></span>
|
|
<select id="mcpToolSelect"></select>
|
|
<textarea id="mcpToolArgs" class="code-input" placeholder='Tool arguments as JSON. Example: {"maxResults": 5}'></textarea>
|
|
<button id="runMcpTool">Run Tool</button>
|
|
<pre id="mcpToolOutput"></pre>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="panel-group">
|
|
<summary>Custom Tool Presets</summary>
|
|
<div class="context-section">
|
|
<input type="text" id="presetName" placeholder="Preset name (e.g. Weekly Standup Notes)">
|
|
<input type="text" id="presetDescription" placeholder="Short description (optional)">
|
|
<input type="text" id="presetTags" placeholder="Tags (comma-separated)">
|
|
<input type="text" id="presetToolName" placeholder="Tool name (e.g. discord.postMessage)">
|
|
<textarea id="presetArgs" class="code-input" placeholder='Arguments JSON (e.g. {"channelId":"abc","message":"Hello"})'></textarea>
|
|
<button id="savePreset">Save Preset</button>
|
|
<button id="clearPreset">Clear</button>
|
|
<div id="presetStatus" class="status-message"></div>
|
|
<select id="presetSelect"></select>
|
|
<button id="runPreset">Run Preset</button>
|
|
<button id="deletePreset" class="danger-btn">Delete Preset</button>
|
|
<pre id="presetOutput"></pre>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="panel-group" open>
|
|
<summary>Automation Manager</summary>
|
|
<div class="context-section automation-manager">
|
|
<div class="automation-layout">
|
|
<div class="automation-list">
|
|
<button id="addAutomation" type="button">New Automation</button>
|
|
<div id="automationList"></div>
|
|
</div>
|
|
<div class="automation-editor">
|
|
<div class="status-message" id="automationEditorStatus">Select an automation to edit.</div>
|
|
<div id="automationEditor" class="automation-editor-fields">
|
|
<input type="text" id="automationName" placeholder="Automation name">
|
|
<select id="automationType">
|
|
<option value="actions">MCP Actions</option>
|
|
<option value="standup">Daily Standup</option>
|
|
</select>
|
|
|
|
<label class="summary-save-toggle">
|
|
<input type="checkbox" id="automationEnabled">
|
|
Enabled
|
|
</label>
|
|
|
|
<div class="status-message">Triggers</div>
|
|
<label class="summary-save-toggle">
|
|
<input type="checkbox" id="automationTriggerStart">
|
|
On session start
|
|
</label>
|
|
<label class="summary-save-toggle">
|
|
<input type="checkbox" id="automationTriggerEnd">
|
|
On session end
|
|
</label>
|
|
<label class="summary-save-toggle">
|
|
<input type="checkbox" id="automationTriggerManual">
|
|
Manual only
|
|
</label>
|
|
|
|
<label class="summary-save-toggle">
|
|
<input type="checkbox" id="automationRequireApproval">
|
|
Require confirmation before running actions
|
|
</label>
|
|
<div class="status-message">Changes are saved automatically.</div>
|
|
|
|
<div id="automationActionsSection">
|
|
<div class="status-message">Actions</div>
|
|
<input type="text" id="automationActionLabel" placeholder="Action label">
|
|
<select id="automationActionType">
|
|
<option value="mcp">MCP Tool</option>
|
|
<option value="webhook">Webhook</option>
|
|
</select>
|
|
<div id="automationActionMcpFields">
|
|
<input type="text" id="automationActionTool" placeholder="MCP tool name">
|
|
<textarea id="automationActionArgs" class="code-input" placeholder='Args JSON (e.g. {"channelId":"abc","message":"Hello"})'></textarea>
|
|
</div>
|
|
<div id="automationActionWebhookFields" style="display:none;">
|
|
<input type="text" id="automationActionWebhookUrl" placeholder="Webhook URL (optional, uses global webhook if empty)">
|
|
<select id="automationActionWebhookMethod">
|
|
<option value="POST">POST</option>
|
|
<option value="PUT">PUT</option>
|
|
<option value="PATCH">PATCH</option>
|
|
</select>
|
|
<textarea id="automationActionWebhookHeaders" class="code-input" placeholder='Headers JSON (optional, e.g. {"Authorization":"Bearer ...","X-Trace":"1"})'></textarea>
|
|
<textarea id="automationActionWebhookBody" class="code-input" placeholder='Body template (JSON string with placeholders, e.g. {"message":"{{summary}}","date":"{{date}}"} )'></textarea>
|
|
<input type="number" id="automationActionWebhookRetryCount" min="0" max="5" step="1" placeholder="Retry count (0-5)">
|
|
</div>
|
|
<button id="addAutomationAction" type="button">Add Action</button>
|
|
<select id="automationActionSelect"></select>
|
|
<button id="removeAutomationAction" class="danger-btn" type="button">Remove Action</button>
|
|
</div>
|
|
|
|
<div id="automationStandupSection">
|
|
<div class="status-message">Discord</div>
|
|
<input type="text" id="standupDiscordTool" placeholder="Tool name (e.g. discord.postMessage)">
|
|
<textarea id="standupDiscordArgs" class="code-input" placeholder='Args JSON with placeholders. Example: {"channelId":"123","message":"{{summary}}"}'></textarea>
|
|
|
|
<div class="status-message">Nextcloud</div>
|
|
<input type="text" id="standupNextcloudTool" placeholder="Tool name (e.g. nextcloud.createNote)">
|
|
<textarea id="standupNextcloudArgs" class="code-input" placeholder='Args JSON with placeholders. Default if empty uses notes/daily/standup-{{date}}.txt'></textarea>
|
|
|
|
<div class="placeholder-help">
|
|
<div class="status-message">Available placeholders</div>
|
|
<div class="placeholder-list">
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{summary}}">{{summary}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{summary_brief}}">{{summary_brief}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{summary_full}}">{{summary_full}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{action_items}}">{{action_items}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{action_items_json}}">{{action_items_json}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{blockers}}">{{blockers}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{decisions}}">{{decisions}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{date}}">{{date}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{date_human}}">{{date_human}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{date_compact}}">{{date_compact}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{datetime}}">{{datetime}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{time}}">{{time}}</button>
|
|
<button type="button" class="placeholder-chip" data-placeholder="{{weekday}}">{{weekday}}</button>
|
|
</div>
|
|
<div class="status-message" id="placeholderStatus"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="saveAutomation" type="button">Save Automation</button>
|
|
<button id="testAutomation" type="button">Test Automation</button>
|
|
<button id="runAutomationNow" type="button">Run Selected Automation</button>
|
|
<button id="deleteAutomation" class="danger-btn" type="button">Delete Automation</button>
|
|
<div id="automationRunStatus" class="status-message"></div>
|
|
<pre id="automationOutput"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<script src="settings.js"></script>
|
|
</body>
|
|
</html>
|