feat: режим индикаторов без цветовой кодировки + переустройство /setup

Новая настройка app_settings.indicator_mode (color | accessible), переключается
на /setup. В режиме accessible сигналы, которые раньше держались только на цвете,
переходят на форму/текст:
- качество цены (0-9) — 5-ступенчатый signal-meter вместо градиентной точки/числа;
  единый модуль web/static/price-quality.js, ветвление по window.QF_INDICATOR_MODE;
- вкладка «Ценообразование»: ведущая колонка-meter вместо заливки строк,
  пометка W вместо амбер-подсветки world-цен, ⚠ вместо красного «загрязнённого» итога.
- GET/PUT /api/settings/ui (без рестарта), регистрируется в обоих наборах роутов.

/setup переустроен: две колонки одной высоты, кнопка «Вернуться в приложение»,
исправлен <title>.

Документация: bible-local 02/03/04 + decisions/2026-08-31-accessible-indicator-mode.md

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LbRvQgPZpM4SJTaX3iLrXk

bible-local/02-architecture.md

@@ -85,6 +85,12 @@ Controls terminology:
 
 CSV export reads PN вендора, Описание, and LOT from `data-vendor-pn`, `data-desc`, `data-lot` row attributes to bypass the rowspan cell offset problem.
 
+In the colour-optional indicator mode (`app_settings.indicator_mode = "accessible"`, see
+[03-database.md](03-database.md) and [decisions/2026-08-31-accessible-indicator-mode.md](decisions/2026-08-31-accessible-indicator-mode.md))
+both tables gain a narrow leading price-quality meter column (per sub-row), the row background
+tint is removed, `world`-fallback cells show a `W` text marker instead of amber, and the footer
+total shows a `⚠` prefix instead of red. CSV output is unaffected.
+
 ## Configuration versioning
 
 Configuration revisions are append-only snapshots stored in `local_configuration_versions`.

bible-local/03-database.md

@@ -17,7 +17,7 @@ Main tables:
 | `local_partnumber_book_items` | PN -> LOT catalog payload |
 | `pending_changes` | sync queue |
 | `connection_settings` | encrypted MariaDB connection settings |
-| `app_settings` | local app state |
+| `app_settings` | local app state (key→value); includes `indicator_mode` = `color` \| `accessible`, a per-client display preference set on `/setup` |
 | `local_schema_migrations` | applied local migration markers |
 | `local_qt_settings` | server-pushed configurator settings cache (from `qt_settings`) |
 
@@ -261,7 +261,9 @@ PK: lot_name
 | price | decimal(12,2) NOT NULL | |
 | price_quality | tinyint unsigned, nullable | added by migration 033. Set by the external pricelist-building tool, 0-9, based on quote recency/count per its own per-lot pricing-period settings — QF only reads and displays it, never computes it. |
 
-`price_quality` is synced through `LocalPricelistItem` (pricelist detail page) and, separately, through `LocalComponent`/`services.ComponentView` (`/api/components`, used by the configurator's search dropdown and item table) — both read paths go through `pricelistItemRow`/`toLocalComponent()` in `internal/localdb/components.go`. The `/api/components` path reads the component universe (`world` ∪ `estimate`, see [decisions/2026-07-24-component-universe-world-union.md](decisions/2026-07-24-component-universe-world-union.md)), where a world-only LOT is forced to `price_quality = 0` — the only place QF writes this field rather than reading it. The color scale (red 0 → yellow 5 → green 9, gradient) lives in **one shared JS module**, `web/static/price-quality.js` (loaded by `base.html` for every page) — `priceQualityColor`/`qualityDotHtml`/`qualityBadgeHtml`/`qualityRowStyle`. Do not reimplement the color scale locally in a template; add a new helper to that module instead. Used in: pricelist detail "Качество" column, configurator search dropdown (colored dot), configurator table (leftmost quality-dot column), pricing tab (row background tint).
+`price_quality` is synced through `LocalPricelistItem` (pricelist detail page) and, separately, through `LocalComponent`/`services.ComponentView` (`/api/components`, used by the configurator's search dropdown and item table) — both read paths go through `pricelistItemRow`/`toLocalComponent()` in `internal/localdb/components.go`. The `/api/components` path reads the component universe (`world` ∪ `estimate`, see [decisions/2026-07-24-component-universe-world-union.md](decisions/2026-07-24-component-universe-world-union.md)), where a world-only LOT is forced to `price_quality = 0` — the only place QF writes this field rather than reading it. The visual scale lives in **one shared JS module**, `web/static/price-quality.js` (loaded by `base.html` for every page) — `priceQualityColor`/`priceQualityLevel`/`qualityMeterHtml`/`qualityDotHtml`/`qualityBadgeHtml`/`qualityRowStyle`. Do not reimplement the scale locally in a template; add a new helper to that module instead. Used in: pricelist detail "Качество" column, configurator search dropdown, configurator table (leftmost quality column), pricing tab.
+
+The module has **two render modes**, chosen per client by `window.QF_INDICATOR_MODE` (injected by `base.html` from `app_settings.indicator_mode`, default `color`): `color` = hue scale red 0 → yellow 5 → green 9; `accessible` = colour-blind-safe 5-step signal-strength meter (`priceQualityLevel`: `0-1/2-3/4-5/6-7/8-9`), single neutral hue. In `accessible` mode the pricing tab drops the row background tint for a leading meter column, the `world`-fallback amber cell tint becomes a `W` text marker, and the "contaminated total" red becomes a `⚠` prefix — see [decisions/2026-08-31-accessible-indicator-mode.md](decisions/2026-08-31-accessible-indicator-mode.md). Any new colour-only signal must add a branch in this module keyed on `isAccessible()`, not a local one.
 
 The real table also has `price_method`, `price_period_days`, `price_coefficient`, `manual_price`, `meta_prices` and `lead_time_weeks` columns, owned and written by the external pricing engine that maintains `qt_pricelist_items` — **keep them in the table for backward compatibility with that system; QF must never drop, rename, or write to them.** QF itself does not model, sync, or display any of them (tried once, removed as unused/dead in the client). Do not re-add them to `models.PricelistItem`/`LocalPricelistItem` without a concrete UI need.
 

bible-local/04-api.md

@@ -29,6 +29,17 @@
 
 `POST /api/restart` exists only in `debug` mode.
 
+## Settings
+
+| Method | Path | Purpose |
+| --- | --- | --- |
+| `GET` | `/api/settings/ui` | read per-client UI display preferences → `{ "indicator_mode": "color" \| "accessible" }` |
+| `PUT` | `/api/settings/ui` | set `indicator_mode` (body `{ "indicator_mode": ... }`); `422` on an unknown value |
+
+Stored in `app_settings` (SQLite); no restart. Registered in both the normal and the setup-mode
+route sets. Consumed by `web/static/price-quality.js` and the pricing tab via a
+`window.QF_INDICATOR_MODE` global that `base.html` renders from the same setting.
+
 ## Reference data
 
 | Method | Path | Purpose |

bible-local/decisions/2026-08-31-accessible-indicator-mode.md

@@ -0,0 +1,63 @@
+# Decision: `indicator_mode` — a colour-optional rendering mode for UI signals
+
+**Date:** 2026-08-31
+**Status:** active
+
+## Context
+
+Several UI signals were encoded by hue alone and unreadable with a colour-vision deficiency:
+
+- `price_quality` (0–9) as a red→yellow→green gradient — a dot in the configurator search
+  dropdown and inline before `lot_name`, a coloured number in the pricelist "Качество" column,
+  a full-row background tint on the "Ценообразование" tab;
+- the amber `world`-fallback price cell tint
+  ([2026-07-10-world-pricelist-fallback.md](2026-07-10-world-pricelist-fallback.md));
+- the red "contaminated total" in the pricing footer
+  ([2026-07-24-pricing-total-world-share.md](2026-07-24-pricing-total-world-share.md)).
+
+The bible has no dedicated accessibility contract, but `table-management` §Icon Semantics,
+`controls-selection` §Buttons, `go-code-style` §Business Logic Placement and `build-version-display`
+say the same thing: meaning is never carried by one ambiguous channel — back it with
+shape / number / explicit `title`+`aria-label`, and keep the indicator visually subordinate.
+
+## Decision
+
+One per-client preference, **`app_settings.indicator_mode`** = `color` (default) | `accessible`,
+set on `/setup` ("Настройки") via `GET`/`PUT /api/settings/ui` (`internal/handlers/settings.go`)
+— no restart. Deliberately named for the concern (how indicators are rendered), not for the
+current widget, so future colour-only signals attach to the same switch.
+
+`internal/handlers/web.go` `render()` and `internal/handlers/setup.go` inject the mode for every
+page; `base.html` publishes it as `window.QF_INDICATOR_MODE`. `web/static/price-quality.js` is
+still the single source of the price-quality scale and branches on the mode internally, so its
+call sites do not change.
+
+In `accessible` mode:
+
+- `price_quality` renders as a **5-step signal-strength meter** (`priceQualityLevel` =
+  `min(4, floor(score/2))` → `0-1 / 2-3 / 4-5 / 6-7 / 8-9`), five bars in one neutral hue, each
+  instance carrying `title`/`aria-label` = `Качество цены: N/9`. `qualityDotHtml` and
+  `qualityBadgeHtml` return the meter;
+- `qualityRowStyle` returns `''` — the pricing tab instead shows the meter in a narrow leading
+  column (conditional `<th>` / `colspan` in `index.html`, per-sub-row `<td>`);
+- the `world`-fallback amber class is dropped for a `W` superscript text marker on the price
+  (text, not a colour class — `applyCustomPrice`'s colour-stripping regex is a non-issue);
+- `_setPricingTotal` drops `text-red-600` for a leading `⚠` glyph, on the same trigger as the
+  red (`worldShare > 0`). The hover popup — including the "prices for N of M positions" coverage
+  line — is unchanged in both modes; per 2026-07-24 there is still no colour-coded coverage-only
+  signal, and `accessible` mode does not add one.
+
+`color` mode is byte-for-byte the previous behaviour.
+
+## Consequences
+
+- Default unchanged; nothing moves until a user opts in on `/setup`.
+- `web/static/price-quality.js` stays the only place that knows the 0–9 scale. Any new
+  colour-coded quality/price signal adds a branch there keyed on `isAccessible()`, never a local
+  reimplementation, and its `accessible` form must be shape/text, not another hue.
+- The pricing-tab tables have a mode-dependent column count (8 / 9). `index.html` guards the
+  `<th>`, the empty-state `colspan`, the `tfoot` "Итого:" `colspan` and the JS row template on
+  `ACCESSIBLE_MODE` / `{{ eq .IndicatorMode "accessible" }}`. CSV export is untouched — it reads
+  `data-*` row attributes, not cell positions.
+- New routes `GET`/`PUT /api/settings/ui`, registered in both the normal and setup-mode route
+  sets in `cmd/qfs/main.go`. `render()` nil-guards `localDB` for tests.

cmd/qfs/main.go

@@ -581,6 +581,10 @@ func runSetupMode(local *localdb.LocalDB) {
 	router.POST("/setup/test", setupHandler.TestConnection)
 	router.GET("/setup/status", setupHandler.GetStatus)
 
+	settingsHandler := handlers.NewSettingsHandler(local)
+	router.GET("/api/settings/ui", settingsHandler.GetUI)
+	router.PUT("/api/settings/ui", settingsHandler.PutUI)
+
 	// Health check
 	router.GET("/health", func(c *gin.Context) {
 		c.JSON(http.StatusOK, gin.H{
@@ -892,6 +896,11 @@ func setupRouter(cfg *config.Config, local *localdb.LocalDB, connMgr *db.Connect
 	router.POST("/setup/test", setupHandler.TestConnection)
 	router.GET("/setup/status", setupHandler.GetStatus)
 
+	// Per-client UI display preferences
+	settingsHandler := handlers.NewSettingsHandler(local)
+	router.GET("/api/settings/ui", settingsHandler.GetUI)
+	router.PUT("/api/settings/ui", settingsHandler.PutUI)
+
 	// Web pages
 	router.GET("/", webHandler.Index)
 	router.GET("/configs", webHandler.Configs)

internal/handlers/settings.go

@@ -0,0 +1,47 @@
+package handlers
+
+import (
+	"net/http"
+
+	"git.mchus.pro/mchus/quoteforge/internal/localdb"
+	"github.com/gin-gonic/gin"
+)
+
+// SettingsHandler serves per-client UI display preferences stored in app_settings.
+type SettingsHandler struct {
+	localDB *localdb.LocalDB
+}
+
+func NewSettingsHandler(localDB *localdb.LocalDB) *SettingsHandler {
+	return &SettingsHandler{localDB: localDB}
+}
+
+type uiSettingsResponse struct {
+	IndicatorMode string `json:"indicator_mode"`
+}
+
+// GetUI returns the current UI display preferences.
+func (h *SettingsHandler) GetUI(c *gin.Context) {
+	c.JSON(http.StatusOK, uiSettingsResponse{
+		IndicatorMode: h.localDB.GetIndicatorMode(),
+	})
+}
+
+// PutUI updates UI display preferences. Currently only indicator_mode.
+func (h *SettingsHandler) PutUI(c *gin.Context) {
+	req, ok := BindJSON[struct {
+		IndicatorMode string `json:"indicator_mode"`
+	}](c)
+	if !ok {
+		return
+	}
+
+	if err := h.localDB.SetIndicatorMode(req.IndicatorMode); err != nil {
+		RespondError(c, http.StatusUnprocessableEntity, "invalid indicator_mode", err)
+		return
+	}
+
+	c.JSON(http.StatusOK, uiSettingsResponse{
+		IndicatorMode: h.localDB.GetIndicatorMode(),
+	})
+}

internal/handlers/setup.go

@@ -10,6 +10,7 @@ import (
 	"time"
 
 	qfassets "git.mchus.pro/mchus/quoteforge"
+	"git.mchus.pro/mchus/quoteforge/internal/appmeta"
 	"git.mchus.pro/mchus/quoteforge/internal/db"
 	"git.mchus.pro/mchus/quoteforge/internal/localdb"
 	"github.com/gin-gonic/gin"
@@ -57,6 +58,8 @@ func (h *SetupHandler) ShowSetup(c *gin.Context) {
 
 	data := gin.H{
 		"Settings":      settings,
+		"IndicatorMode": h.localDB.GetIndicatorMode(),
+		"AppVersion":    appmeta.Version(),
 	}
 
 	tmpl := h.templates["setup.html"]
@@ -207,4 +210,3 @@ func buildMySQLDSN(host string, port int, database, user, password string, timeo
 	}
 	return cfg.FormatDSN()
 }
-

internal/handlers/web.go

@@ -114,6 +114,10 @@ func NewWebHandler(_ string, localDB *localdb.LocalDB) (*WebHandler, error) {
 
 func (h *WebHandler) render(c *gin.Context, name string, data gin.H) {
 	data["AppVersion"] = appmeta.Version()
+	data["IndicatorMode"] = localdb.IndicatorModeColor
+	if h.localDB != nil {
+		data["IndicatorMode"] = h.localDB.GetIndicatorMode()
+	}
 	c.Header("Content-Type", "text/html; charset=utf-8")
 	tmpl, ok := h.templates[name]
 	if !ok {

internal/localdb/indicator_mode_test.go

@@ -0,0 +1,45 @@
+package localdb
+
+import (
+	"path/filepath"
+	"testing"
+)
+
+func newModeDB(t *testing.T) *LocalDB {
+	t.Helper()
+	local, err := New(filepath.Join(t.TempDir(), "mode.db"))
+	if err != nil {
+		t.Fatalf("open localdb: %v", err)
+	}
+	t.Cleanup(func() { _ = local.Close() })
+	return local
+}
+
+func TestIndicatorMode(t *testing.T) {
+	local := newModeDB(t)
+
+	if got := local.GetIndicatorMode(); got != IndicatorModeColor {
+		t.Fatalf("unset: got %q, want %q", got, IndicatorModeColor)
+	}
+
+	if err := local.SetIndicatorMode(IndicatorModeAccessible); err != nil {
+		t.Fatalf("set accessible: %v", err)
+	}
+	if got := local.GetIndicatorMode(); got != IndicatorModeAccessible {
+		t.Fatalf("after set accessible: got %q, want %q", got, IndicatorModeAccessible)
+	}
+
+	if err := local.SetIndicatorMode(IndicatorModeColor); err != nil {
+		t.Fatalf("set color: %v", err)
+	}
+	if got := local.GetIndicatorMode(); got != IndicatorModeColor {
+		t.Fatalf("after set color: got %q, want %q", got, IndicatorModeColor)
+	}
+
+	if err := local.SetIndicatorMode("rainbow"); err == nil {
+		t.Fatal("expected error for invalid mode, got nil")
+	}
+	if got := local.GetIndicatorMode(); got != IndicatorModeColor {
+		t.Fatalf("after rejected set: got %q, want %q", got, IndicatorModeColor)
+	}
+}

internal/localdb/localdb.go

@@ -1130,6 +1130,43 @@ func (l *LocalDB) upsertAppSetting(tx *gorm.DB, key, value string, updatedAt tim
 	`, key, value, updatedAt.Format(time.RFC3339)).Error
 }
 
+// Indicator display mode: how the UI renders signals that are otherwise carried
+// by colour alone (price-quality scale, world-fallback price cells, incomplete
+// pricing totals). "color" (default) keeps the hue coding; "accessible" swaps it
+// for shape/text so it stays readable with a colour-vision deficiency. Per-client
+// preference stored in app_settings; consumed by web/static/price-quality.js and
+// the pricing tab via base.html's window.QF_INDICATOR_MODE.
+const (
+	IndicatorModeColor      = "color"
+	IndicatorModeAccessible = "accessible"
+)
+
+// GetIndicatorMode returns the stored indicator display mode, falling back to
+// "color" when unset or invalid.
+func (l *LocalDB) GetIndicatorMode() string {
+	value, ok := l.getAppSettingValue("indicator_mode")
+	if !ok {
+		return IndicatorModeColor
+	}
+	switch strings.TrimSpace(value) {
+	case IndicatorModeAccessible:
+		return IndicatorModeAccessible
+	default:
+		return IndicatorModeColor
+	}
+}
+
+// SetIndicatorMode stores the indicator display mode. Only the two known
+// literals are accepted.
+func (l *LocalDB) SetIndicatorMode(mode string) error {
+	mode = strings.TrimSpace(mode)
+	if mode != IndicatorModeColor && mode != IndicatorModeAccessible {
+		return fmt.Errorf("invalid indicator mode %q", mode)
+	}
+	now := time.Now()
+	return l.upsertAppSetting(l.db, "indicator_mode", mode, now)
+}
+
 // SetLastSyncTime sets the last sync timestamp
 func (l *LocalDB) SetLastSyncTime(t time.Time) error {
 	// Using raw SQL for upsert since SQLite doesn't have native UPSERT in all versions

web/static/app.css

@@ -44,3 +44,42 @@
     visibility: visible;
     opacity: 1;
 }
+
+/* Colour-blind-safe price-quality indicator (mono mode). 5-step signal meter,
+   single neutral hue — magnitude reads from the number of lit bars, not colour. */
+.qf-quality-meter {
+    display: inline-flex;
+    align-items: flex-end;
+    gap: 1px;
+    height: 12px;
+    vertical-align: middle;
+    line-height: 0;
+}
+.qf-quality-meter > i {
+    display: inline-block;
+    width: 3px;
+    background-color: #d1d5db;
+    border-radius: 1px;
+}
+.qf-quality-meter > i.on {
+    background-color: #374151;
+}
+.qf-quality-meter > i:nth-child(1) { height: 30%; }
+.qf-quality-meter > i:nth-child(2) { height: 45%; }
+.qf-quality-meter > i:nth-child(3) { height: 62%; }
+.qf-quality-meter > i:nth-child(4) { height: 80%; }
+.qf-quality-meter > i:nth-child(5) { height: 100%; }
+.qf-quality-meter[data-size="sm"] {
+    height: 10px;
+    gap: 1px;
+}
+.qf-quality-meter[data-size="sm"] > i {
+    width: 2px;
+}
+
+/* Leading meter column on the pricing tab tables (mono mode). */
+.pricing-quality-meter {
+    width: 1%;
+    white-space: nowrap;
+    text-align: center;
+}

web/static/price-quality.js

@@ -1,16 +1,25 @@
-// Shared LOT price-quality color scale, used everywhere price_quality is
+// Shared LOT price-quality indicator, used everywhere price_quality is
 // displayed (pricelist detail page, configurator search dropdown, configurator
-// table, pricing tab). price_quality is a 0-9 score set by the external
+// table, pricing tab). price_quality is a 0-9 score set by the external pricing
-// pricing tool (see bible-local/03-database.md, qt_pricelist_items.price_quality)
+// tool (see bible-local/03-database.md, qt_pricelist_items.price_quality) — QF
-// — QF only displays it, never computes it. Single source of the color scale
+// only displays it, never computes it. Single source of the visual scale so
-// so every view stays visually consistent.
+// every view stays consistent.
 //
-// Gradient: 0 = red, 5 = yellow, 9 = green.
+// Two render modes, chosen per client via window.QF_INDICATOR_MODE (injected by
+// base.html from app_settings, key indicator_mode):
+//   "color" (default) — hue scale, 0 = red, 5 = yellow, 9 = green.
+//   "accessible"      — colour-blind-safe 5-step signal-strength meter,
+//                       single neutral hue, magnitude encoded by bar count.
+// See bible-local/decisions/2026-08-31-accessible-indicator-mode.md.
 (function () {
     const RED = [220, 38, 38];
     const YELLOW = [234, 179, 8];
     const GREEN = [22, 163, 74];
 
+    function isAccessible() {
+        return window.QF_INDICATOR_MODE === 'accessible';
+    }
+
     function lerp(c1, c2, t) {
         return c1.map((v, i) => Math.round(v + (c2[i] - v) * t));
     }
@@ -28,27 +37,53 @@
         return rgb ? `rgb(${rgb})` : null;
     }
 
-    // Small colored dot for compact contexts (search dropdown, configurator table cell).
+    // 0-9 score -> 0-4 meter level. 0-1 / 2-3 / 4-5 / 6-7 / 8-9.
+    function priceQualityLevel(quality) {
+        if (typeof quality !== 'number' || Number.isNaN(quality)) return null;
+        const q = Math.max(0, Math.min(9, quality));
+        return Math.min(4, Math.floor(q / 2));
+    }
+
+    // Monochrome 5-step signal-strength meter. size: undefined | 'sm'.
+    function qualityMeterHtml(quality, opts) {
+        const level = priceQualityLevel(quality);
+        if (level === null) return '';
+        const size = opts && opts.size === 'sm' ? ' data-size="sm"' : '';
+        const title = `Качество цены: ${quality}/9`;
+        let bars = '';
+        for (let i = 0; i < 5; i++) {
+            bars += `<i class="${i <= level ? 'on' : ''}"></i>`;
+        }
+        return `<span class="qf-quality-meter"${size} role="img" aria-label="${title}" title="${title}">${bars}</span>`;
+    }
+
+    // Small indicator for compact contexts (search dropdown, configurator table cell).
     function qualityDotHtml(quality) {
+        if (isAccessible()) return qualityMeterHtml(quality, { size: 'sm' });
         const color = priceQualityColor(quality);
         if (!color) return '';
         return `<span class="inline-block w-2 h-2 rounded-full" style="background-color: ${color}" title="Качество цены: ${quality}/9"></span>`;
     }
 
-    // Colored number badge for a dedicated "quality" column/cell.
+    // Indicator for a dedicated "quality" column/cell.
     function qualityBadgeHtml(quality) {
         if (typeof quality !== 'number') return '<span class="text-gray-400">-</span>';
+        if (isAccessible()) return qualityMeterHtml(quality, { size: 'sm' });
         const color = priceQualityColor(quality);
         return `<span class="font-semibold" style="color: ${color}" title="Качество цены: ${quality}/9">${quality}</span>`;
     }
 
-    // Light row-tint background for table rows, e.g. the pricing tab.
+    // Light row-tint background for table rows, e.g. the pricing tab. Suppressed
+    // in accessible mode — the pricing tab carries its own leading meter column there.
     function qualityRowStyle(quality) {
+        if (isAccessible()) return '';
         const rgb = priceQualityRgb(quality);
         return rgb ? `background-color: rgba(${rgb}, 0.10)` : '';
     }
 
     window.priceQualityColor = priceQualityColor;
+    window.priceQualityLevel = priceQualityLevel;
+    window.qualityMeterHtml = qualityMeterHtml;
     window.qualityDotHtml = qualityDotHtml;
     window.qualityBadgeHtml = qualityBadgeHtml;
     window.qualityRowStyle = qualityRowStyle;

web/templates/base.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="/static/app.css">
     <script src="/static/vendor/tailwindcss.browser.js"></script>
     <script src="/static/vendor/htmx-1.9.10.min.js"></script>
+    <script>window.QF_INDICATOR_MODE = "{{ .IndicatorMode }}";</script>
     <script src="/static/price-quality.js"></script>
     <style>
         .htmx-request { opacity: 0.5; }

web/templates/index.html

@@ -222,6 +222,7 @@
                 <table class="w-full text-sm border-collapse">
                     <thead class="bg-gray-50 text-gray-700">
                         <tr>
+                            {{if eq .IndicatorMode "accessible"}}<th class="px-2 py-2 border-b" title="Качество цены"><span class="sr-only">Качество цены</span></th>{{end}}
                             <th class="px-2 py-2 text-left border-b whitespace-nowrap">PN вендора</th>
                             <th class="px-2 py-2 text-left border-b">Описание</th>
                             <th class="px-2 py-2 text-left border-b">LOT</th>
@@ -233,11 +234,11 @@
                         </tr>
                     </thead>
                     <tbody id="pricing-body-buy">
-                        <tr><td colspan="8" class="px-2 py-8 text-center text-gray-400">Загрузите BOM во вкладке «BOM»</td></tr>
+                        <tr><td colspan="{{if eq .IndicatorMode "accessible"}}9{{else}}8{{end}}" class="px-2 py-8 text-center text-gray-400">Загрузите BOM во вкладке «BOM»</td></tr>
                     </tbody>
                     <tfoot id="pricing-foot-buy" class="hidden bg-gray-50 font-semibold">
                         <tr>
-                            <td colspan="4" class="px-2 py-2 text-right">Итого:</td>
+                            <td colspan="{{if eq .IndicatorMode "accessible"}}5{{else}}4{{end}}" class="px-2 py-2 text-right">Итого:</td>
                             <td class="px-2 py-2 text-right" id="pricing-total-buy-estimate">—</td>
                             <td class="px-2 py-2 text-right stock-price-col" id="pricing-total-buy-warehouse">—</td>
                             <td class="px-2 py-2 text-right" id="pricing-total-buy-competitor">—</td>
@@ -271,6 +272,7 @@
                 <table class="w-full text-sm border-collapse">
                     <thead class="bg-gray-50 text-gray-700">
                         <tr>
+                            {{if eq .IndicatorMode "accessible"}}<th class="px-2 py-2 border-b" title="Качество цены"><span class="sr-only">Качество цены</span></th>{{end}}
                             <th class="px-2 py-2 text-left border-b whitespace-nowrap">PN вендора</th>
                             <th class="px-2 py-2 text-left border-b">Описание</th>
                             <th class="px-2 py-2 text-left border-b">LOT</th>
@@ -282,11 +284,11 @@
                         </tr>
                     </thead>
                     <tbody id="pricing-body-sale">
-                        <tr><td colspan="8" class="px-2 py-8 text-center text-gray-400">Загрузите BOM во вкладке «BOM»</td></tr>
+                        <tr><td colspan="{{if eq .IndicatorMode "accessible"}}9{{else}}8{{end}}" class="px-2 py-8 text-center text-gray-400">Загрузите BOM во вкладке «BOM»</td></tr>
                     </tbody>
                     <tfoot id="pricing-foot-sale" class="hidden bg-gray-50 font-semibold">
                         <tr>
-                            <td colspan="4" class="px-2 py-2 text-right">Итого:</td>
+                            <td colspan="{{if eq .IndicatorMode "accessible"}}5{{else}}4{{end}}" class="px-2 py-2 text-right">Итого:</td>
                             <td class="px-2 py-2 text-right" id="pricing-total-sale-estimate">—</td>
                             <td class="px-2 py-2 text-right stock-price-col" id="pricing-total-sale-warehouse">—</td>
                             <td class="px-2 py-2 text-right" id="pricing-total-sale-competitor">—</td>
@@ -4506,6 +4508,17 @@ async function renderPricingTab() {
     // families since applyCustomPrice() strips those on vendor-price cells via regex.
     const WORLD_CLS = 'bg-amber-50 text-amber-700';
 
+    // Colour-blind-safe mode: leading signal-meter column, no row tint, and the
+    // amber world-fallback cell tint is replaced by a text marker.
+    const ACCESSIBLE_MODE = window.QF_INDICATOR_MODE === 'accessible';
+    const worldCls  = (w) => (!ACCESSIBLE_MODE && w) ? WORLD_CLS : '';
+    const worldMark = (w) => (ACCESSIBLE_MODE && w)
+        ? '<sup class="text-gray-500 font-semibold" title="Цена-заглушка из прайслиста WORLD">W</sup>'
+        : '';
+    const meterCell = (q, bt) => ACCESSIBLE_MODE
+        ? `<td class="pricing-quality-meter px-2 py-1.5 align-middle ${bt || ''}">${qualityMeterHtml(q)}</td>`
+        : '';
+
     // ─── Build shared row data (unit prices for display, totals for math) ────
     // Each BOM row is exploded into per-LOT sub-rows; grouped by vendor PN via groupStart/groupSize.
     const cartQtyMap = {};
@@ -4636,7 +4649,7 @@ async function renderPricingTab() {
     // ─── Populate Buy table ──────────────────────────────────────────────────
     tbodyBuy.innerHTML = '';
     if (!rowData.length) {
-        tbodyBuy.innerHTML = '<tr><td colspan="8" class="px-2 py-8 text-center text-gray-400">Нет данных для отображения</td></tr>';
+        tbodyBuy.innerHTML = `<tr><td colspan="${ACCESSIBLE_MODE ? 9 : 8}" class="px-2 py-8 text-center text-gray-400">Нет данных для отображения</td></tr>`;
         tfootBuy.classList.add('hidden');
     } else {
         let totEst = 0, totWh = 0, totComp = 0, totVendor = 0;
@@ -4670,12 +4683,13 @@ async function renderPricingTab() {
                 <td${rs} class="px-2 py-1.5 text-xs text-gray-500 truncate max-w-xs border-t border-gray-200 align-top">${escapeHtml(r.desc)}</td>`;
             })() : '';
             tr.innerHTML = `
+                ${meterCell(r.priceQuality, borderTop)}
                 ${pnDescHtml}
                 <td class="px-2 py-1.5 text-xs ${borderTop}">${r.lotCell}</td>
                 <td class="px-2 py-1.5 text-right text-xs ${borderTop}">${r.qty}</td>
-                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${r.estWorld  ? WORLD_CLS : ''}">${r.estUnit > 0 ? formatCurrency(r.estUnit) : '—'}</td>
+                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${worldCls(r.estWorld)}">${r.estUnit > 0 ? formatCurrency(r.estUnit) : '—'}${worldMark(r.estWorld)}</td>
-                <td class="px-2 py-1.5 text-right text-xs stock-price-col ${borderTop} ${r.whWorld   ? WORLD_CLS : ''}">${r.warehouseUnit != null ? formatCurrency(r.warehouseUnit) : '—'}</td>
+                <td class="px-2 py-1.5 text-right text-xs stock-price-col ${borderTop} ${worldCls(r.whWorld)}">${r.warehouseUnit != null ? formatCurrency(r.warehouseUnit) : '—'}${worldMark(r.whWorld)}</td>
-                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${r.compWorld ? WORLD_CLS : ''}">${r.competitorUnit != null ? formatCurrency(r.competitorUnit) : '—'}</td>
+                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${worldCls(r.compWorld)}">${r.competitorUnit != null ? formatCurrency(r.competitorUnit) : '—'}${worldMark(r.compWorld)}</td>
                 <td class="px-2 py-1.5 text-right text-xs pricing-vendor-price-buy ${borderTop} ${r.vendorOrigUnit == null ? 'text-gray-400' : ''}">${r.vendorOrigUnit != null ? formatCurrency(r.vendorOrigUnit) : '—'}</td>
             `;
             tbodyBuy.appendChild(tr);
@@ -4690,7 +4704,7 @@ async function renderPricingTab() {
     // ─── Populate Sale table ─────────────────────────────────────────────────
     tbodySale.innerHTML = '';
     if (!rowData.length) {
-        tbodySale.innerHTML = '<tr><td colspan="8" class="px-2 py-8 text-center text-gray-400">Нет данных для отображения</td></tr>';
+        tbodySale.innerHTML = `<tr><td colspan="${ACCESSIBLE_MODE ? 9 : 8}" class="px-2 py-8 text-center text-gray-400">Нет данных для отображения</td></tr>`;
         tfootSale.classList.add('hidden');
     } else {
         let totEst = 0, totWh = 0, totComp = 0;
@@ -4727,12 +4741,13 @@ async function renderPricingTab() {
                 <td${rs} class="px-2 py-1.5 text-xs text-gray-500 truncate max-w-xs border-t border-gray-200 align-top">${escapeHtml(r.desc)}</td>`;
             })() : '';
             tr.innerHTML = `
+                ${meterCell(r.priceQuality, borderTop)}
                 ${pnDescHtml}
                 <td class="px-2 py-1.5 text-xs ${borderTop}">${r.lotCell}</td>
                 <td class="px-2 py-1.5 text-right text-xs ${borderTop}">${r.qty}</td>
-                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${r.estWorld  ? WORLD_CLS : ''}">${saleEstUnit  > 0    ? formatCurrency(saleEstUnit)  : '—'}</td>
+                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${worldCls(r.estWorld)}">${saleEstUnit  > 0    ? formatCurrency(saleEstUnit)  : '—'}${worldMark(r.estWorld)}</td>
-                <td class="px-2 py-1.5 text-right text-xs stock-price-col ${borderTop} ${r.whWorld   ? WORLD_CLS : ''}">${saleWhUnit   != null ? formatCurrency(saleWhUnit)   : '—'}</td>
+                <td class="px-2 py-1.5 text-right text-xs stock-price-col ${borderTop} ${worldCls(r.whWorld)}">${saleWhUnit   != null ? formatCurrency(saleWhUnit)   : '—'}${worldMark(r.whWorld)}</td>
-                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${r.compWorld ? WORLD_CLS : ''}">${saleCompUnit != null ? formatCurrency(saleCompUnit) : '—'}</td>
+                <td class="px-2 py-1.5 text-right text-xs ${borderTop} ${worldCls(r.compWorld)}">${saleCompUnit != null ? formatCurrency(saleCompUnit) : '—'}${worldMark(r.compWorld)}</td>
                 <td class="px-2 py-1.5 text-right text-xs pricing-vendor-price-sale ${borderTop} text-gray-400">—</td>
             `;
             tbodySale.appendChild(tr);
@@ -4779,10 +4794,15 @@ function _setPricingTotal(elId, has, total, worldTotal, count, totalRows) {
         parts.push(`Цены есть не для всех позиций: ${count} из ${totalRows}`);
     }
 
-    // Red is reserved for a sum that actually leans on world stand-in prices.
+    // A sum that leans on world stand-in prices is flagged: by red in color
-    el.className = `${el.className} ${share > 0 ? 'text-red-600' : ''} pricing-total-tip`
+    // mode, by a leading ⚠ glyph in accessible mode. The hover popup carries the
+    // exact share (and the coverage line, when some positions have no price) in
+    // both modes.
+    const accessible = window.QF_INDICATOR_MODE === 'accessible';
+    el.className = `${el.className} ${share > 0 && !accessible ? 'text-red-600' : ''} pricing-total-tip`
         .replace(/\s+/g, ' ').trim();
-    el.innerHTML = `${formatCurrency(total)}<span class="pricing-total-tip__body">${parts.join('<br>')}</span>`;
+    const mark = share > 0 && accessible ? '<span title="Часть суммы — цена-заглушка WORLD">⚠</span> ' : '';
+    el.innerHTML = `${mark}${formatCurrency(total)}<span class="pricing-total-tip__body">${parts.join('<br>')}</span>`;
 }
 
 // One decimal, comma separator, no trailing ",0".

web/templates/setup.html

@@ -4,26 +4,39 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OFS - Настройка подключения</title>
+    <title>QuoteForge — Настройки</title>
     <link rel="stylesheet" href="/static/app.css">
     <script src="/static/vendor/tailwindcss.browser.js"></script>
 </head>
-<body class="bg-gray-100 min-h-screen flex items-center justify-center">
+<body class="bg-gray-100 min-h-screen">
-    <div class="max-w-md w-full mx-4">
+    <div class="max-w-4xl w-full mx-auto px-4 py-10">
-        <div class="bg-white rounded-lg shadow-lg p-8">
+        {{if .Settings}}
-            <div class="text-center mb-8">
+        <div class="mb-4">
+            <a href="/" class="inline-flex items-center gap-1.5 text-sm text-blue-600 hover:text-blue-800">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+                </svg>
+                Вернуться в приложение
+            </a>
+        </div>
+        {{end}}
+        <div class="text-center mb-6">
             <h1 class="text-2xl font-bold text-blue-600">QuoteForge</h1>
-                <p class="text-gray-600 mt-2">Настройка подключения к базе данных</p>
+            <p class="text-gray-600 mt-1">Настройки</p>
         </div>
 
-            <div class="bg-amber-50 border border-amber-300 rounded-md p-3 mb-4 flex items-start gap-2">
+        <div class="bg-amber-50 border border-amber-300 rounded-md p-3 mb-6 flex items-start gap-2">
             <svg class="w-5 h-5 text-amber-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
             </svg>
             <p class="text-sm text-amber-800"><span class="font-semibold">Важно:</span> не закрывайте консольное окно приложения — без него программа не работает.</p>
         </div>
 
-            <form id="setup-form" class="space-y-4">
+        <div class="grid gap-6 md:grid-cols-2">
+        <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col">
+            <h2 class="text-lg font-semibold text-gray-800 mb-4">Подключение к базе данных</h2>
+
+            <form id="setup-form" class="space-y-4 flex flex-col flex-1">
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-1">Хост сервера</label>
                     <input type="text" name="host" id="host"
@@ -68,13 +81,7 @@
 
                 <div id="status" class="hidden p-3 rounded-md text-sm"></div>
 
-                <div class="flex space-x-3 pt-4">
+                <div class="flex space-x-3 pt-4 mt-auto">
-                    {{if .Settings}}
-                    <a href="/"
-                       class="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition text-center">
-                        Назад
-                    </a>
-                    {{end}}
                     <button type="button" onclick="testConnection()"
                             class="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition">
                         Проверить
@@ -87,8 +94,56 @@
             </form>
         </div>
 
-        <p class="text-center text-gray-500 text-sm mt-4">
+        <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col">
-            QuoteForge - Конфигуратор серверов
+            <h2 class="text-lg font-semibold text-gray-800">Индикаторы</h2>
+            <p class="text-sm text-gray-600 mt-1 mb-4">
+                Часть подсказок в интерфейсе передаётся только цветом: качество цены в спецификации
+                и на вкладке «Ценообразование», цены-заглушки, неполные итоги. Выберите режим без
+                цветовой кодировки, если цвета трудно различать.
+            </p>
+
+            <div class="space-y-3">
+                <label class="flex items-start gap-3 p-3 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-50">
+                    <input type="radio" name="indicator-mode" value="color" class="mt-1"
+                           {{if ne .IndicatorMode "accessible"}}checked{{end}}>
+                    <span class="flex-1">
+                        <span class="block text-sm font-medium text-gray-800">Цветовая индикация</span>
+                        <span class="block text-xs text-gray-500 mt-0.5">Шкала «красный → жёлтый → зелёный», подсветка ячеек.</span>
+                        <span class="inline-flex items-center gap-1.5 mt-2">
+                            <span class="inline-block w-2 h-2 rounded-full" style="background-color:rgb(220,38,38)"></span>
+                            <span class="inline-block w-2 h-2 rounded-full" style="background-color:rgb(234,179,8)"></span>
+                            <span class="inline-block w-2 h-2 rounded-full" style="background-color:rgb(22,163,74)"></span>
+                        </span>
+                    </span>
+                </label>
+
+                <label class="flex items-start gap-3 p-3 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-50">
+                    <input type="radio" name="indicator-mode" value="accessible" class="mt-1"
+                           {{if eq .IndicatorMode "accessible"}}checked{{end}}>
+                    <span class="flex-1">
+                        <span class="block text-sm font-medium text-gray-800">Без цветовой кодировки</span>
+                        <span class="block text-xs text-gray-500 mt-0.5">Значок-«сигнал» из 5 столбиков и текстовые пометки вместо цвета.</span>
+                        <span class="inline-flex items-end gap-2 mt-2">
+                            <span class="qf-quality-meter"><i></i><i></i><i></i><i></i><i></i></span>
+                            <span class="qf-quality-meter"><i class="on"></i><i class="on"></i><i></i><i></i><i></i></span>
+                            <span class="qf-quality-meter"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i></span>
+                        </span>
+                    </span>
+                </label>
+            </div>
+
+            <div class="mt-auto pt-4">
+                <div id="indicator-status" class="hidden mb-3 p-2 rounded-md text-sm"></div>
+                <button type="button" onclick="saveIndicatorMode()"
+                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
+                    Сохранить
+                </button>
+            </div>
+        </div>
+        </div>
+
+        <p class="text-center text-gray-500 text-sm mt-8">
+            QuoteForge {{.AppVersion}} — Конфигуратор серверов
         </p>
     </div>
 
@@ -159,6 +214,31 @@
             }
         }
 
+        async function saveIndicatorMode() {
+            const mode = document.querySelector('input[name="indicator-mode"]:checked')?.value || 'color';
+            const box = document.getElementById('indicator-status');
+            box.className = 'mb-3 p-2 rounded-md text-sm bg-blue-100 text-blue-800';
+            box.textContent = 'Сохранение...';
+            try {
+                const resp = await fetch('/api/settings/ui', {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ indicator_mode: mode }),
+                });
+                const data = await resp.json();
+                if (resp.ok) {
+                    box.className = 'mb-3 p-2 rounded-md text-sm bg-green-100 text-green-800';
+                    box.textContent = '✓ Сохранено. Изменения появятся при следующем открытии страниц.';
+                } else {
+                    box.className = 'mb-3 p-2 rounded-md text-sm bg-red-100 text-red-800';
+                    box.textContent = data.error || 'Не удалось сохранить';
+                }
+            } catch (e) {
+                box.className = 'mb-3 p-2 rounded-md text-sm bg-red-100 text-red-800';
+                box.textContent = 'Ошибка сети: ' + e.message;
+            }
+        }
+
         async function checkServerReady() {
             let attempts = 0;
             const maxAttempts = 30; // 30 seconds max