@openqa/cli 1.3.2 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -326,15 +326,50 @@ async function startWebServer() {
326
326
  res.status(500).json({ success: false, error: error.message });
327
327
  }
328
328
  });
329
- app.post("/api/intervention/:id", (req, res) => {
329
+ app.post("/api/intervention/:id", async (req, res) => {
330
330
  const { id } = req.params;
331
331
  const { response } = req.body;
332
- console.log(`Intervention ${id}: ${response}`);
333
- broadcast({
334
- type: "intervention-response",
335
- data: { id, response, timestamp: (/* @__PURE__ */ new Date()).toISOString() }
336
- });
337
- res.json({ success: true });
332
+ console.log(`Intervention ${id} ${response} by user`);
333
+ res.json({ success: true, message: `Intervention ${response}d` });
334
+ });
335
+ app.post("/api/test-connection", async (req, res) => {
336
+ try {
337
+ const cfg2 = config.getConfigSync();
338
+ if (cfg2.saas.url) {
339
+ const controller = new AbortController();
340
+ const timeoutId = setTimeout(() => controller.abort(), 1e4);
341
+ try {
342
+ const response = await fetch(cfg2.saas.url, {
343
+ method: "HEAD",
344
+ signal: controller.signal,
345
+ headers: cfg2.saas.authType === "basic" && cfg2.saas.username && cfg2.saas.password ? {
346
+ "Authorization": "Basic " + Buffer.from(`${cfg2.saas.username}:${cfg2.saas.password}`).toString("base64")
347
+ } : {}
348
+ });
349
+ clearTimeout(timeoutId);
350
+ if (response.ok) {
351
+ res.json({ success: true, message: "SaaS connection successful" });
352
+ } else {
353
+ res.json({ success: false, message: "SaaS connection failed" });
354
+ }
355
+ } catch (fetchError) {
356
+ clearTimeout(timeoutId);
357
+ throw fetchError;
358
+ }
359
+ } else {
360
+ res.json({ success: false, message: "No SaaS URL configured" });
361
+ }
362
+ } catch (error) {
363
+ res.json({ success: false, message: "Connection error: " + (error.message || String(error)) });
364
+ }
365
+ });
366
+ app.post("/api/start", async (req, res) => {
367
+ try {
368
+ console.log("Starting agent session...");
369
+ res.json({ success: true, message: "Session started" });
370
+ } catch (error) {
371
+ res.json({ success: false, message: "Failed to start session: " + (error.message || String(error)) });
372
+ }
338
373
  });
339
374
  app.get("/api/tasks", async (req, res) => {
340
375
  const tasks = [
@@ -1589,228 +1624,720 @@ async function startWebServer() {
1589
1624
  `);
1590
1625
  });
1591
1626
  app.get("/config", (req, res) => {
1627
+ const cfg2 = config.getConfigSync();
1592
1628
  res.send(`
1593
- <!DOCTYPE html>
1594
- <html>
1595
- <head>
1596
- <title>OpenQA - Configuration</title>
1597
- <style>
1598
- body { font-family: system-ui; max-width: 800px; margin: 40px auto; padding: 20px; background: #0f172a; color: #e2e8f0; }
1599
- h1 { color: #38bdf8; }
1600
- nav { margin: 20px 0; }
1601
- nav a { color: #38bdf8; text-decoration: none; margin-right: 20px; }
1602
- nav a:hover { text-decoration: underline; }
1603
- .section { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 20px; margin: 20px 0; }
1604
- .section h2 { margin-top: 0; color: #38bdf8; font-size: 18px; }
1605
- .config-item { margin: 15px 0; }
1606
- .config-item label { display: block; margin-bottom: 5px; color: #94a3b8; font-size: 14px; }
1607
- .config-item input, .config-item select {
1608
- background: #334155;
1609
- border: 1px solid #475569;
1610
- color: #e2e8f0;
1611
- padding: 8px 12px;
1612
- border-radius: 4px;
1613
- font-family: monospace;
1614
- font-size: 14px;
1615
- width: 100%;
1616
- max-width: 400px;
1617
- }
1618
- .config-item input:focus, .config-item select:focus {
1619
- outline: none;
1620
- border-color: #38bdf8;
1621
- box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.1);
1622
- }
1623
- .btn {
1624
- background: #38bdf8;
1625
- color: white;
1626
- border: none;
1627
- padding: 10px 20px;
1628
- border-radius: 6px;
1629
- cursor: pointer;
1630
- font-size: 14px;
1631
- margin-right: 10px;
1632
- }
1633
- .btn:hover { background: #0ea5e9; }
1634
- .btn-secondary { background: #64748b; }
1635
- .btn-secondary:hover { background: #475569; }
1636
- .success { color: #10b981; margin-left: 10px; }
1637
- .error { color: #ef4444; margin-left: 10px; }
1638
- code { background: #334155; padding: 2px 6px; border-radius: 3px; font-size: 13px; }
1639
- .checkbox { margin-right: 8px; }
1640
- </style>
1641
- </head>
1642
- <body>
1643
- <h1>\u2699\uFE0F Configuration</h1>
1644
- <nav>
1645
- <a href="/">Dashboard</a>
1646
- <a href="/kanban">Kanban</a>
1647
- <a href="/config">Config</a>
1648
- </nav>
1649
-
1650
- <div class="section">
1651
- <h2>SaaS Target</h2>
1652
- <form id="configForm">
1653
- <div class="config-item">
1654
- <label>URL</label>
1655
- <input type="url" id="saas_url" name="saas.url" value="${cfg.saas.url || ""}" placeholder="https://your-app.com">
1656
- </div>
1657
- <div class="config-item">
1658
- <label>Auth Type</label>
1659
- <select id="saas_authType" name="saas.authType">
1660
- <option value="none" ${cfg.saas.authType === "none" ? "selected" : ""}>None</option>
1661
- <option value="basic" ${cfg.saas.authType === "basic" ? "selected" : ""}>Basic Auth</option>
1662
- <option value="bearer" ${cfg.saas.authType === "bearer" ? "selected" : ""}>Bearer Token</option>
1663
- <option value="session" ${cfg.saas.authType === "session" ? "selected" : ""}>Session</option>
1664
- </select>
1629
+ <!DOCTYPE html>
1630
+ <html lang="en">
1631
+ <head>
1632
+ <meta charset="UTF-8">
1633
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1634
+ <title>OpenQA \u2014 Configuration</title>
1635
+ <link rel="preconnect" href="https://fonts.googleapis.com">
1636
+ <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
1637
+ <style>
1638
+ :root {
1639
+ --bg: #080b10;
1640
+ --surface: #0d1117;
1641
+ --panel: #111720;
1642
+ --border: rgba(255,255,255,0.06);
1643
+ --border-hi: rgba(255,255,255,0.12);
1644
+ --accent: #f97316;
1645
+ --accent-lo: rgba(249,115,22,0.08);
1646
+ --accent-md: rgba(249,115,22,0.18);
1647
+ --green: #22c55e;
1648
+ --green-lo: rgba(34,197,94,0.08);
1649
+ --red: #ef4444;
1650
+ --red-lo: rgba(239,68,68,0.08);
1651
+ --amber: #f59e0b;
1652
+ --blue: #38bdf8;
1653
+ --text-1: #f1f5f9;
1654
+ --text-2: #8b98a8;
1655
+ --text-3: #4b5563;
1656
+ --mono: 'DM Mono', monospace;
1657
+ --sans: 'Syne', sans-serif;
1658
+ --radius: 10px;
1659
+ --radius-lg: 16px;
1660
+ }
1661
+
1662
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
1663
+
1664
+ body {
1665
+ font-family: var(--sans);
1666
+ background: var(--bg);
1667
+ color: var(--text-1);
1668
+ min-height: 100vh;
1669
+ overflow-x: hidden;
1670
+ }
1671
+
1672
+ /* \u2500\u2500 Layout \u2500\u2500 */
1673
+ .shell {
1674
+ display: grid;
1675
+ grid-template-columns: 220px 1fr;
1676
+ grid-template-rows: 1fr;
1677
+ min-height: 100vh;
1678
+ }
1679
+
1680
+ /* \u2500\u2500 Sidebar \u2500\u2500 */
1681
+ aside {
1682
+ background: var(--surface);
1683
+ border-right: 1px solid var(--border);
1684
+ display: flex;
1685
+ flex-direction: column;
1686
+ padding: 28px 0;
1687
+ position: sticky;
1688
+ top: 0;
1689
+ height: 100vh;
1690
+ }
1691
+
1692
+ .logo {
1693
+ display: flex;
1694
+ align-items: center;
1695
+ gap: 10px;
1696
+ padding: 0 24px 32px;
1697
+ border-bottom: 1px solid var(--border);
1698
+ margin-bottom: 12px;
1699
+ }
1700
+
1701
+ .logo-mark {
1702
+ width: 34px;
1703
+ height: 34px;
1704
+ background: var(--accent);
1705
+ border-radius: 8px;
1706
+ display: grid;
1707
+ place-items: center;
1708
+ font-size: 16px;
1709
+ flex-shrink: 0;
1710
+ }
1711
+
1712
+ .logo-name {
1713
+ font-family: var(--sans);
1714
+ font-weight: 800;
1715
+ font-size: 18px;
1716
+ letter-spacing: -0.5px;
1717
+ color: var(--text-1);
1718
+ }
1719
+
1720
+ .logo-version {
1721
+ font-family: var(--mono);
1722
+ font-size: 10px;
1723
+ color: var(--text-3);
1724
+ letter-spacing: 0.5px;
1725
+ margin-top: 2px;
1726
+ }
1727
+
1728
+ .nav-section {
1729
+ padding: 8px 12px;
1730
+ flex: 1;
1731
+ }
1732
+
1733
+ .nav-label {
1734
+ font-family: var(--mono);
1735
+ font-size: 10px;
1736
+ color: var(--text-3);
1737
+ letter-spacing: 1.5px;
1738
+ text-transform: uppercase;
1739
+ padding: 0 12px;
1740
+ margin: 16px 0 6px;
1741
+ }
1742
+
1743
+ .nav-item {
1744
+ display: flex;
1745
+ align-items: center;
1746
+ gap: 10px;
1747
+ padding: 9px 12px;
1748
+ border-radius: var(--radius);
1749
+ color: var(--text-2);
1750
+ text-decoration: none;
1751
+ font-size: 14px;
1752
+ font-weight: 600;
1753
+ transition: all 0.15s ease;
1754
+ cursor: pointer;
1755
+ }
1756
+
1757
+ .nav-item:hover { color: var(--text-1); background: var(--panel); }
1758
+ .nav-item.active { color: var(--accent); background: var(--accent-lo); }
1759
+ .nav-item .icon { font-size: 15px; width: 20px; text-align: center; }
1760
+
1761
+ .sidebar-footer {
1762
+ padding: 16px 24px;
1763
+ border-top: 1px solid var(--border);
1764
+ }
1765
+
1766
+ .status-pill {
1767
+ display: flex;
1768
+ align-items: center;
1769
+ gap: 8px;
1770
+ font-family: var(--mono);
1771
+ font-size: 11px;
1772
+ color: var(--text-2);
1773
+ }
1774
+
1775
+ .dot {
1776
+ width: 7px;
1777
+ height: 7px;
1778
+ border-radius: 50%;
1779
+ background: var(--green);
1780
+ box-shadow: 0 0 8px var(--green);
1781
+ }
1782
+
1783
+ /* \u2500\u2500 Main \u2500\u2500 */
1784
+ main {
1785
+ display: flex;
1786
+ flex-direction: column;
1787
+ min-height: 100vh;
1788
+ overflow-y: auto;
1789
+ }
1790
+
1791
+ .topbar {
1792
+ display: flex;
1793
+ align-items: center;
1794
+ justify-content: space-between;
1795
+ padding: 20px 32px;
1796
+ border-bottom: 1px solid var(--border);
1797
+ background: var(--surface);
1798
+ position: sticky;
1799
+ top: 0;
1800
+ z-index: 10;
1801
+ }
1802
+
1803
+ .page-title {
1804
+ font-size: 15px;
1805
+ font-weight: 700;
1806
+ color: var(--text-1);
1807
+ letter-spacing: -0.2px;
1808
+ }
1809
+
1810
+ .page-breadcrumb {
1811
+ font-family: var(--mono);
1812
+ font-size: 11px;
1813
+ color: var(--text-3);
1814
+ margin-top: 2px;
1815
+ }
1816
+
1817
+ .topbar-actions {
1818
+ display: flex;
1819
+ align-items: center;
1820
+ gap: 12px;
1821
+ }
1822
+
1823
+ .btn-sm {
1824
+ font-family: var(--sans);
1825
+ font-weight: 700;
1826
+ font-size: 12px;
1827
+ padding: 8px 16px;
1828
+ border-radius: 8px;
1829
+ border: none;
1830
+ cursor: pointer;
1831
+ transition: all 0.15s ease;
1832
+ letter-spacing: 0.2px;
1833
+ }
1834
+
1835
+ .btn-ghost {
1836
+ background: var(--panel);
1837
+ color: var(--text-2);
1838
+ border: 1px solid var(--border);
1839
+ }
1840
+ .btn-ghost:hover { border-color: var(--border-hi); color: var(--text-1); }
1841
+
1842
+ .btn-primary {
1843
+ background: var(--accent);
1844
+ color: #fff;
1845
+ }
1846
+ .btn-primary:hover { background: #ea580c; box-shadow: 0 0 20px rgba(249,115,22,0.35); }
1847
+
1848
+ /* \u2500\u2500 Content \u2500\u2500 */
1849
+ .content {
1850
+ padding: 28px 32px;
1851
+ display: flex;
1852
+ flex-direction: column;
1853
+ gap: 24px;
1854
+ }
1855
+
1856
+ /* \u2500\u2500 Panel \u2500\u2500 */
1857
+ .panel {
1858
+ background: var(--panel);
1859
+ border: 1px solid var(--border);
1860
+ border-radius: var(--radius-lg);
1861
+ overflow: hidden;
1862
+ }
1863
+
1864
+ .panel-head {
1865
+ display: flex;
1866
+ align-items: center;
1867
+ justify-content: space-between;
1868
+ padding: 18px 24px;
1869
+ border-bottom: 1px solid var(--border);
1870
+ }
1871
+
1872
+ .panel-title {
1873
+ font-size: 13px;
1874
+ font-weight: 700;
1875
+ color: var(--text-1);
1876
+ letter-spacing: -0.1px;
1877
+ }
1878
+
1879
+ .panel-body {
1880
+ padding: 24px;
1881
+ }
1882
+
1883
+ /* \u2500\u2500 Form \u2500\u2500 */
1884
+ .form-grid {
1885
+ display: grid;
1886
+ gap: 20px;
1887
+ }
1888
+
1889
+ .form-section {
1890
+ display: flex;
1891
+ flex-direction: column;
1892
+ gap: 16px;
1893
+ }
1894
+
1895
+ .form-section-title {
1896
+ font-size: 12px;
1897
+ font-weight: 700;
1898
+ color: var(--text-2);
1899
+ text-transform: uppercase;
1900
+ letter-spacing: 1px;
1901
+ margin-bottom: 8px;
1902
+ padding-bottom: 8px;
1903
+ border-bottom: 1px solid var(--border);
1904
+ }
1905
+
1906
+ .form-row {
1907
+ display: grid;
1908
+ grid-template-columns: 1fr 1fr;
1909
+ gap: 16px;
1910
+ }
1911
+
1912
+ .form-field {
1913
+ display: flex;
1914
+ flex-direction: column;
1915
+ gap: 6px;
1916
+ }
1917
+
1918
+ .form-field.full {
1919
+ grid-column: 1 / -1;
1920
+ }
1921
+
1922
+ label {
1923
+ font-family: var(--mono);
1924
+ font-size: 11px;
1925
+ color: var(--text-3);
1926
+ text-transform: uppercase;
1927
+ letter-spacing: 0.5px;
1928
+ font-weight: 500;
1929
+ }
1930
+
1931
+ input, select {
1932
+ background: var(--surface);
1933
+ border: 1px solid var(--border);
1934
+ color: var(--text-1);
1935
+ padding: 10px 14px;
1936
+ border-radius: var(--radius);
1937
+ font-family: var(--mono);
1938
+ font-size: 12px;
1939
+ transition: all 0.15s ease;
1940
+ }
1941
+
1942
+ input:focus, select:focus {
1943
+ outline: none;
1944
+ border-color: var(--accent);
1945
+ box-shadow: 0 0 0 1px var(--accent);
1946
+ }
1947
+
1948
+ input[type="checkbox"] {
1949
+ width: 16px;
1950
+ height: 16px;
1951
+ margin: 0;
1952
+ cursor: pointer;
1953
+ }
1954
+
1955
+ .checkbox-label {
1956
+ display: flex;
1957
+ align-items: center;
1958
+ gap: 8px;
1959
+ cursor: pointer;
1960
+ font-size: 12px;
1961
+ color: var(--text-2);
1962
+ text-transform: none;
1963
+ letter-spacing: normal;
1964
+ }
1965
+
1966
+ /* \u2500\u2500 Actions \u2500\u2500 */
1967
+ .actions {
1968
+ display: flex;
1969
+ gap: 12px;
1970
+ padding: 20px 24px;
1971
+ background: var(--surface);
1972
+ border-top: 1px solid var(--border);
1973
+ }
1974
+
1975
+ .message {
1976
+ font-family: var(--mono);
1977
+ font-size: 11px;
1978
+ padding: 8px 12px;
1979
+ border-radius: var(--radius);
1980
+ margin-left: auto;
1981
+ }
1982
+
1983
+ .message.success {
1984
+ background: var(--green-lo);
1985
+ color: var(--green);
1986
+ border: 1px solid rgba(34,197,94,0.2);
1987
+ }
1988
+
1989
+ .message.error {
1990
+ background: var(--red-lo);
1991
+ color: var(--red);
1992
+ border: 1px solid rgba(239,68,68,0.2);
1993
+ }
1994
+
1995
+ /* \u2500\u2500 Code Block \u2500\u2500 */
1996
+ .code-block {
1997
+ background: var(--surface);
1998
+ border: 1px solid var(--border);
1999
+ border-radius: var(--radius);
2000
+ padding: 20px;
2001
+ font-family: var(--mono);
2002
+ font-size: 11px;
2003
+ color: var(--text-2);
2004
+ overflow-x: auto;
2005
+ }
2006
+
2007
+ .code-block pre {
2008
+ margin: 0;
2009
+ line-height: 1.6;
2010
+ }
2011
+
2012
+ /* \u2500\u2500 Responsive \u2500\u2500 */
2013
+ @media (max-width: 900px) {
2014
+ .shell { grid-template-columns: 1fr; }
2015
+ aside { display: none; }
2016
+ .form-row { grid-template-columns: 1fr; }
2017
+ }
2018
+ </style>
2019
+ </head>
2020
+ <body>
2021
+
2022
+ <div class="shell">
2023
+
2024
+ <!-- \u2500\u2500 Sidebar \u2500\u2500 -->
2025
+ <aside>
2026
+ <div class="logo">
2027
+ <div class="logo-mark">\u2699</div>
2028
+ <div>
2029
+ <div class="logo-name">OpenQA</div>
2030
+ <div class="logo-version">v2.1.0 \xB7 OSS</div>
2031
+ </div>
2032
+ </div>
2033
+
2034
+ <div class="nav-section">
2035
+ <div class="nav-label">Overview</div>
2036
+ <a class="nav-item" href="/">
2037
+ <span class="icon">\u25A6</span> Dashboard
2038
+ </a>
2039
+ <a class="nav-item" href="/kanban">
2040
+ <span class="icon">\u229E</span> Kanban
2041
+ </a>
2042
+
2043
+ <div class="nav-label">System</div>
2044
+ <a class="nav-item active" href="/config">
2045
+ <span class="icon">\u2699</span> Configuration
2046
+ </a>
2047
+ </div>
2048
+
2049
+ <div class="sidebar-footer">
2050
+ <div class="status-pill">
2051
+ <div class="dot"></div>
2052
+ <span>System Ready</span>
2053
+ </div>
2054
+ </div>
2055
+ </aside>
2056
+
2057
+ <!-- \u2500\u2500 Main \u2500\u2500 -->
2058
+ <main>
2059
+
2060
+ <!-- Topbar -->
2061
+ <div class="topbar">
2062
+ <div>
2063
+ <div class="page-title">Configuration</div>
2064
+ <div class="page-breadcrumb">openqa / system / settings</div>
2065
+ </div>
2066
+ <div class="topbar-actions">
2067
+ <button class="btn-sm btn-ghost">Export Config</button>
2068
+ <button class="btn-sm btn-ghost">Import Config</button>
2069
+ <button class="btn-sm btn-primary" onclick="saveAllConfig()">Save All</button>
2070
+ </div>
2071
+ </div>
2072
+
2073
+ <!-- Content -->
2074
+ <div class="content">
2075
+
2076
+ <!-- SaaS Configuration -->
2077
+ <div class="panel">
2078
+ <div class="panel-head">
2079
+ <span class="panel-title">\u{1F310} SaaS Target Configuration</span>
2080
+ </div>
2081
+ <div class="panel-body">
2082
+ <form class="form-grid" id="saas-form">
2083
+ <div class="form-section">
2084
+ <div class="form-section-title">Target Application</div>
2085
+ <div class="form-field full">
2086
+ <label>Application URL</label>
2087
+ <input type="url" id="saas_url" name="saas.url" value="${cfg2.saas.url || ""}" placeholder="https://your-app.com">
1665
2088
  </div>
1666
- <div class="config-item">
1667
- <label>Username (for Basic Auth)</label>
1668
- <input type="text" id="saas_username" name="saas.username" value="${cfg.saas.username || ""}" placeholder="username">
2089
+ <div class="form-row">
2090
+ <div class="form-field">
2091
+ <label>Authentication Type</label>
2092
+ <select id="saas_authType" name="saas.authType">
2093
+ <option value="none" ${cfg2.saas.authType === "none" ? "selected" : ""}>None</option>
2094
+ <option value="basic" ${cfg2.saas.authType === "basic" ? "selected" : ""}>Basic Auth</option>
2095
+ <option value="bearer" ${cfg2.saas.authType === "bearer" ? "selected" : ""}>Bearer Token</option>
2096
+ <option value="session" ${cfg2.saas.authType === "session" ? "selected" : ""}>Session</option>
2097
+ </select>
2098
+ </div>
2099
+ <div class="form-field">
2100
+ <label>Timeout (seconds)</label>
2101
+ <input type="number" id="saas_timeout" name="saas.timeout" value="30" min="5" max="300">
2102
+ </div>
1669
2103
  </div>
1670
- <div class="config-item">
1671
- <label>Password (for Basic Auth)</label>
1672
- <input type="password" id="saas_password" name="saas.password" value="${cfg.saas.password || ""}" placeholder="password">
2104
+ <div class="form-row">
2105
+ <div class="form-field">
2106
+ <label>Username</label>
2107
+ <input type="text" id="saas_username" name="saas.username" value="${cfg2.saas.username || ""}" placeholder="username">
2108
+ </div>
2109
+ <div class="form-field">
2110
+ <label>Password</label>
2111
+ <input type="password" id="saas_password" name="saas.password" value="${cfg2.saas.password || ""}" placeholder="password">
2112
+ </div>
1673
2113
  </div>
1674
- </form>
1675
- </div>
2114
+ </div>
2115
+ </form>
2116
+ </div>
2117
+ </div>
1676
2118
 
1677
- <div class="section">
1678
- <h2>LLM Configuration</h2>
1679
- <form id="configForm">
1680
- <div class="config-item">
1681
- <label>Provider</label>
1682
- <select id="llm_provider" name="llm.provider">
1683
- <option value="openai" ${cfg.llm.provider === "openai" ? "selected" : ""}>OpenAI</option>
1684
- <option value="anthropic" ${cfg.llm.provider === "anthropic" ? "selected" : ""}>Anthropic</option>
1685
- <option value="ollama" ${cfg.llm.provider === "ollama" ? "selected" : ""}>Ollama</option>
1686
- </select>
1687
- </div>
1688
- <div class="config-item">
1689
- <label>Model</label>
1690
- <input type="text" id="llm_model" name="llm.model" value="${cfg.llm.model || ""}" placeholder="gpt-4, claude-3-sonnet, etc.">
2119
+ <!-- LLM Configuration -->
2120
+ <div class="panel">
2121
+ <div class="panel-head">
2122
+ <span class="panel-title">\u{1F916} LLM Configuration</span>
2123
+ </div>
2124
+ <div class="panel-body">
2125
+ <form class="form-grid" id="llm-form">
2126
+ <div class="form-section">
2127
+ <div class="form-section-title">Language Model Provider</div>
2128
+ <div class="form-row">
2129
+ <div class="form-field">
2130
+ <label>Provider</label>
2131
+ <select id="llm_provider" name="llm.provider">
2132
+ <option value="openai" ${cfg2.llm.provider === "openai" ? "selected" : ""}>OpenAI</option>
2133
+ <option value="anthropic" ${cfg2.llm.provider === "anthropic" ? "selected" : ""}>Anthropic</option>
2134
+ <option value="ollama" ${cfg2.llm.provider === "ollama" ? "selected" : ""}>Ollama</option>
2135
+ </select>
2136
+ </div>
2137
+ <div class="form-field">
2138
+ <label>Model</label>
2139
+ <input type="text" id="llm_model" name="llm.model" value="${cfg2.llm.model || ""}" placeholder="gpt-4, claude-3-sonnet, etc.">
2140
+ </div>
1691
2141
  </div>
1692
- <div class="config-item">
2142
+ <div class="form-field full">
1693
2143
  <label>API Key</label>
1694
- <input type="password" id="llm_apiKey" name="llm.apiKey" value="${cfg.llm.apiKey || ""}" placeholder="Your API key">
2144
+ <input type="password" id="llm_apiKey" name="llm.apiKey" value="${cfg2.llm.apiKey || ""}" placeholder="Your API key">
1695
2145
  </div>
1696
- <div class="config-item">
2146
+ <div class="form-field full">
1697
2147
  <label>Base URL (for Ollama)</label>
1698
- <input type="url" id="llm_baseUrl" name="llm.baseUrl" value="${cfg.llm.baseUrl || ""}" placeholder="http://localhost:11434">
2148
+ <input type="url" id="llm_baseUrl" name="llm.baseUrl" value="${cfg2.llm.baseUrl || ""}" placeholder="http://localhost:11434">
1699
2149
  </div>
1700
- </form>
1701
- </div>
2150
+ </div>
2151
+ </form>
2152
+ </div>
2153
+ </div>
1702
2154
 
1703
- <div class="section">
1704
- <h2>Agent Settings</h2>
1705
- <form id="configForm">
1706
- <div class="config-item">
1707
- <label>
1708
- <input type="checkbox" id="agent_autoStart" name="agent.autoStart" class="checkbox" ${cfg.agent.autoStart ? "checked" : ""}>
1709
- Auto-start
2155
+ <!-- Agent Configuration -->
2156
+ <div class="panel">
2157
+ <div class="panel-head">
2158
+ <span class="panel-title">\u{1F3AF} Agent Settings</span>
2159
+ </div>
2160
+ <div class="panel-body">
2161
+ <form class="form-grid" id="agent-form">
2162
+ <div class="form-section">
2163
+ <div class="form-section-title">Agent Behavior</div>
2164
+ <div class="form-field">
2165
+ <label class="checkbox-label">
2166
+ <input type="checkbox" id="agent_autoStart" name="agent.autoStart" ${cfg2.agent.autoStart ? "checked" : ""}>
2167
+ Auto-start on launch
1710
2168
  </label>
1711
2169
  </div>
1712
- <div class="config-item">
1713
- <label>Interval (ms)</label>
1714
- <input type="number" id="agent_intervalMs" name="agent.intervalMs" value="${cfg.agent.intervalMs}" min="60000">
1715
- </div>
1716
- <div class="config-item">
1717
- <label>Max Iterations</label>
1718
- <input type="number" id="agent_maxIterations" name="agent.maxIterations" value="${cfg.agent.maxIterations}" min="1" max="100">
2170
+ <div class="form-row">
2171
+ <div class="form-field">
2172
+ <label>Check Interval (ms)</label>
2173
+ <input type="number" id="agent_intervalMs" name="agent.intervalMs" value="${cfg2.agent.intervalMs}" min="60000" step="60000">
2174
+ </div>
2175
+ <div class="form-field">
2176
+ <label>Max Iterations</label>
2177
+ <input type="number" id="agent_maxIterations" name="agent.maxIterations" value="${cfg2.agent.maxIterations}" min="1" max="100">
2178
+ </div>
1719
2179
  </div>
1720
- </form>
1721
- </div>
2180
+ </div>
2181
+ </form>
2182
+ </div>
2183
+ </div>
1722
2184
 
1723
- <div class="section">
1724
- <h2>Actions</h2>
1725
- <button type="button" class="btn" onclick="saveConfig()">Save Configuration</button>
1726
- <button type="button" class="btn btn-secondary" onclick="resetConfig()">Reset to Defaults</button>
1727
- <span id="message"></span>
1728
- </div>
2185
+ <!-- Environment Variables -->
2186
+ <div class="panel">
2187
+ <div class="panel-head">
2188
+ <span class="panel-title">\u{1F4DD} Environment Variables</span>
2189
+ </div>
2190
+ <div class="panel-body">
2191
+ <p style="color: var(--text-3); font-size: 12px; margin-bottom: 16px;">
2192
+ You can also set these environment variables before starting OpenQA:
2193
+ </p>
2194
+ <div class="code-block">
2195
+ <pre>export SAAS_URL="https://your-app.com"
2196
+ export SAAS_AUTH_TYPE="basic"
2197
+ export SAAS_USERNAME="admin"
2198
+ export SAAS_PASSWORD="secret"
2199
+
2200
+ export LLM_PROVIDER="openai"
2201
+ export OPENAI_API_KEY="your-openai-key"
2202
+ export LLM_MODEL="gpt-4"
1729
2203
 
1730
- <div class="section">
1731
- <h2>Environment Variables</h2>
1732
- <p>You can also set these environment variables before starting OpenQA:</p>
1733
- <pre style="background: #334155; padding: 15px; border-radius: 6px; overflow-x: auto;"><code>export SAAS_URL="https://your-app.com"
1734
2204
  export AGENT_AUTO_START=true
1735
- export LLM_PROVIDER=openai
1736
- export OPENAI_API_KEY="your-key"
2205
+ export AGENT_INTERVAL_MS=3600000
2206
+ export AGENT_MAX_ITERATIONS=20
1737
2207
 
1738
- openqa start</code></pre>
2208
+ openqa start</pre>
1739
2209
  </div>
2210
+ </div>
2211
+ </div>
1740
2212
 
1741
- <script>
1742
- async function saveConfig() {
1743
- const form = document.getElementById('configForm');
1744
- const formData = new FormData(form);
1745
- const config = {};
1746
-
1747
- for (let [key, value] of formData.entries()) {
1748
- if (value === '') continue;
1749
-
1750
- // Handle nested keys like "saas.url"
1751
- const keys = key.split('.');
1752
- let obj = config;
1753
- for (let i = 0; i < keys.length - 1; i++) {
1754
- if (!obj[keys[i]]) obj[keys[i]] = {};
1755
- obj = obj[keys[i]];
1756
- }
1757
-
1758
- // Convert checkbox values to boolean
1759
- if (key.includes('autoStart')) {
1760
- obj[keys[keys.length - 1]] = value === 'on';
1761
- } else if (key.includes('intervalMs') || key.includes('maxIterations')) {
1762
- obj[keys[keys.length - 1]] = parseInt(value);
1763
- } else {
1764
- obj[keys[keys.length - 1]] = value;
1765
- }
1766
- }
1767
-
1768
- try {
1769
- const response = await fetch('/api/config', {
1770
- method: 'POST',
1771
- headers: { 'Content-Type': 'application/json' },
1772
- body: JSON.stringify(config)
1773
- });
1774
-
1775
- const result = await response.json();
1776
- if (result.success) {
1777
- showMessage('Configuration saved successfully!', 'success');
1778
- setTimeout(() => location.reload(), 1500);
1779
- } else {
1780
- showMessage('Failed to save configuration', 'error');
1781
- }
1782
- } catch (error) {
1783
- showMessage('Error: ' + error.message, 'error');
1784
- }
1785
- }
1786
-
1787
- async function resetConfig() {
1788
- if (confirm('Are you sure you want to reset all configuration to defaults?')) {
1789
- try {
1790
- const response = await fetch('/api/config/reset', { method: 'POST' });
1791
- const result = await response.json();
1792
- if (result.success) {
1793
- showMessage('Configuration reset to defaults', 'success');
1794
- setTimeout(() => location.reload(), 1500);
1795
- }
1796
- } catch (error) {
1797
- showMessage('Error: ' + error.message, 'error');
1798
- }
1799
- }
1800
- }
1801
-
1802
- function showMessage(text, type) {
1803
- const messageEl = document.getElementById('message');
1804
- messageEl.textContent = text;
1805
- messageEl.className = type;
1806
- setTimeout(() => {
1807
- messageEl.textContent = '';
1808
- messageEl.className = '';
1809
- }, 3000);
1810
- }
1811
- </script>
1812
- </body>
1813
- </html>
2213
+ <!-- Actions -->
2214
+ <div class="actions">
2215
+ <button class="btn-sm btn-ghost" onclick="testConnection()">Test Connection</button>
2216
+ <button class="btn-sm btn-ghost" onclick="exportConfig()">Export Config</button>
2217
+ <button class="btn-sm btn-ghost" onclick="resetConfig()">Reset to Defaults</button>
2218
+ <div id="message"></div>
2219
+ </div>
2220
+
2221
+ </div><!-- /content -->
2222
+ </main>
2223
+ </div><!-- /shell -->
2224
+
2225
+ <script>
2226
+ async function saveAllConfig() {
2227
+ const forms = ['saas-form', 'llm-form', 'agent-form'];
2228
+ const config = {};
2229
+
2230
+ for (const formId of forms) {
2231
+ const form = document.getElementById(formId);
2232
+ const formData = new FormData(form);
2233
+
2234
+ for (let [key, value] of formData.entries()) {
2235
+ if (value === '') continue;
2236
+
2237
+ // Handle nested keys like "saas.url"
2238
+ const keys = key.split('.');
2239
+ let obj = config;
2240
+ for (let i = 0; i < keys.length - 1; i++) {
2241
+ if (!obj[keys[i]]) obj[keys[i]] = {};
2242
+ obj = obj[keys[i]];
2243
+ }
2244
+
2245
+ // Convert checkbox values to boolean
2246
+ if (key.includes('autoStart')) {
2247
+ obj[keys[keys.length - 1]] = value === 'on';
2248
+ } else if (key.includes('intervalMs') || key.includes('maxIterations') || key.includes('timeout')) {
2249
+ obj[keys[keys.length - 1]] = parseInt(value);
2250
+ } else {
2251
+ obj[keys[keys.length - 1]] = value;
2252
+ }
2253
+ }
2254
+ }
2255
+
2256
+ try {
2257
+ const response = await fetch('/api/config', {
2258
+ method: 'POST',
2259
+ headers: { 'Content-Type': 'application/json' },
2260
+ body: JSON.stringify(config)
2261
+ });
2262
+
2263
+ if (response.ok) {
2264
+ showMessage('Configuration saved successfully!', 'success');
2265
+ } else {
2266
+ showMessage('Failed to save configuration', 'error');
2267
+ }
2268
+ } catch (error) {
2269
+ showMessage('Error: ' + error.message, 'error');
2270
+ }
2271
+ }
2272
+
2273
+ async function testConnection() {
2274
+ showMessage('Testing connection...', 'success');
2275
+
2276
+ try {
2277
+ const response = await fetch('/api/test-connection', { method: 'POST' });
2278
+
2279
+ if (response.ok) {
2280
+ showMessage('Connection successful!', 'success');
2281
+ } else {
2282
+ showMessage('Connection failed', 'error');
2283
+ }
2284
+ } catch (error) {
2285
+ showMessage('Connection error: ' + error.message, 'error');
2286
+ }
2287
+ }
2288
+
2289
+ async function exportConfig() {
2290
+ try {
2291
+ const response = await fetch('/api/config');
2292
+ const config = await response.json();
2293
+
2294
+ const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
2295
+ const url = URL.createObjectURL(blob);
2296
+ const a = document.createElement('a');
2297
+ a.href = url;
2298
+ a.download = 'openqa-config.json';
2299
+ a.click();
2300
+ URL.revokeObjectURL(url);
2301
+
2302
+ showMessage('Configuration exported', 'success');
2303
+ } catch (error) {
2304
+ showMessage('Export failed: ' + error.message, 'error');
2305
+ }
2306
+ }
2307
+
2308
+ async function resetConfig() {
2309
+ if (confirm('Are you sure you want to reset all configuration to defaults? This cannot be undone.')) {
2310
+ try {
2311
+ const response = await fetch('/api/config/reset', { method: 'POST' });
2312
+
2313
+ if (response.ok) {
2314
+ location.reload();
2315
+ } else {
2316
+ showMessage('Failed to reset configuration', 'error');
2317
+ }
2318
+ } catch (error) {
2319
+ showMessage('Error: ' + error.message, 'error');
2320
+ }
2321
+ }
2322
+ }
2323
+
2324
+ function showMessage(msg, type) {
2325
+ const el = document.getElementById('message');
2326
+ el.textContent = msg;
2327
+ el.className = 'message ' + type;
2328
+ setTimeout(() => { el.textContent = ''; el.className = ''; }, 5000);
2329
+ }
2330
+
2331
+ // Auto-save on field change
2332
+ document.querySelectorAll('input, select').forEach(field => {
2333
+ field.addEventListener('change', () => {
2334
+ showMessage('Changes made - click "Save All" to apply', 'success');
2335
+ });
2336
+ });
2337
+ </script>
2338
+
2339
+ </body>
2340
+ </html>
1814
2341
  `);
1815
2342
  });
1816
2343
  const server = app.listen(cfg.web.port, cfg.web.host, () => {