flow-tasks/docs/flowtask-docs.html at v1.6.0 · NovakPAai/flow-tasks · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>FlowTask — Полная документация</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #0f1117; --surface: #141924; --border: #1e2a3a; --border2: #2d3748;
      --text: #e2e8f0; --muted: #64748b; --muted2: #475569;
      --accent: #6366f1; --accent-light: #818cf8; --accent-pale: #a5b4fc;
    }
    html, body { height: 100%; }
    html { scroll-behavior: smooth; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; width: 100%; display: flex; align-items: flex-start; }

    .sidebar { width: 248px; flex-shrink: 0; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--border); padding: 32px 0 32px; background: #0c0f16; z-index: 10; }
    .sidebar-logo { padding: 0 20px 24px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
    .sidebar-logo-name { font-size: 16px; font-weight: 800; background: linear-gradient(90deg, #818cf8, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .sidebar-logo-sub { font-size: 11px; color: var(--muted2); margin-top: 2px; }
    .nav-group { margin-bottom: 4px; }
    .nav-group-label { padding: 6px 20px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); }
    .nav-link { display: block; padding: 6px 20px; font-size: 13px; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; transition: color .15s, border-color .15s, background .15s; }
    .nav-link:hover { color: var(--text); background: rgba(99,102,241,.06); border-left-color: var(--border2); }
    .nav-link.active { color: var(--accent-pale); border-left-color: var(--accent); background: rgba(99,102,241,.08); }

    .main { margin-left: 248px; flex: 1; min-width: 0; padding: 0 56px 80px; }

    .hero { padding: 56px 0 48px; border-bottom: 1px solid var(--border); }
    .badge { display: inline-block; background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.4); color: var(--accent-pale); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 12px; border-radius: 20px; margin-bottom: 18px; }
    .new-badge { display: inline-block; background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.4); color: #34d399; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; margin-left: 8px; vertical-align: middle; }
    .hero h1 { font-size: 44px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin-bottom: 14px; }
    .hero h1 span { background: linear-gradient(90deg, #818cf8, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .hero p { font-size: 16px; color: var(--muted); line-height: 1.7; }

    .section { padding: 52px 0 0; scroll-margin-top: 24px; }
    .section + .section { border-top: 1px solid var(--border); margin-top: 52px; }
    .section-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 8px; }
    .section-title { font-size: 26px; font-weight: 700; color: #f1f5f9; margin-bottom: 6px; letter-spacing: -.01em; }
    .section-sub { font-size: 15px; color: var(--muted); margin-bottom: 32px; line-height: 1.65; }

    .simple { background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.18); border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; font-size: 14px; color: #94a3b8; line-height: 1.75; }
    .simple strong { color: var(--accent-pale); }
    .simple::before { content: '🎓 Простыми словами: '; font-weight: 700; color: var(--accent-pale); }

    .subsection { margin-top: 36px; }
    .subsection-title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

    .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; width: 100%; }
    .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; transition: border-color .2s; }
    .card:hover { border-color: #3d5070; }
    .card-icon { font-size: 22px; margin-bottom: 12px; }
    .card h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
    .card p  { font-size: 13px; color: var(--muted); line-height: 1.6; }

    .steps { display: flex; flex-direction: column; gap: 10px; width: 100%; }
    .step { display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; width: 100%; }
    .step-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
    .step h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
    .step p  { font-size: 13px; color: var(--muted); line-height: 1.6; }

    .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; width: 100%; }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th { text-align: left; padding: 10px 16px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted2); border-bottom: 1px solid var(--border); }
    td { padding: 10px 16px; color: #94a3b8; border-bottom: 1px solid #0f1117; vertical-align: top; line-height: 1.5; }
    tr:last-child td { border-bottom: none; }
    td:first-child { color: var(--text); font-weight: 500; }
    .yes { color: #34d399; font-weight: 600; }
    .no  { color: var(--muted2); }

    code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2); border-radius: 5px; padding: 1px 7px; color: var(--accent-pale); }
    .code-block { background: #0c0f16; border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: #94a3b8; line-height: 1.8; overflow-x: auto; }
    .code-block .cm { color: #475569; }
    .code-block .kw { color: #818cf8; }
    .code-block .st { color: #34d399; }
    .code-block .nu { color: #fb923c; }

    .role-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
    .r-owner  { background: rgba(99,102,241,.15); color: #818cf8; border: 1px solid rgba(99,102,241,.3); }
    .r-member { background: rgba(16,185,129,.12);  color: #34d399; border: 1px solid rgba(16,185,129,.3); }
    .r-viewer { background: rgba(100,116,139,.1);  color: #94a3b8; border: 1px solid rgba(100,116,139,.25); }
    .r-super  { background: rgba(251,191,36,.1);   color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }

    .tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; margin: 1px; }
    .tag-method-get    { background: rgba(16,185,129,.15); color: #34d399; }
    .tag-method-post   { background: rgba(99,102,241,.15); color: #818cf8; }
    .tag-method-patch  { background: rgba(245,158,11,.15); color: #fbbf24; }
    .tag-method-delete { background: rgba(244,63,94,.15);  color: #f87171; }

    .notice { background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.22); border-radius: 12px; padding: 14px 18px; display: flex; gap: 12px; font-size: 13px; color: #94a3b8; line-height: 1.7; }
    .notice-icon { flex-shrink: 0; font-size: 18px; line-height: 1.5; }
    .notice strong { color: #fbbf24; }
    .info { background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.2); border-radius: 12px; padding: 14px 18px; display: flex; gap: 12px; font-size: 13px; color: #94a3b8; line-height: 1.7; }
    .info-icon { flex-shrink: 0; font-size: 16px; line-height: 1.6; }
    .info strong { color: var(--accent-pale); }
    .success { background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.2); border-radius: 12px; padding: 14px 18px; display: flex; gap: 12px; font-size: 13px; color: #94a3b8; line-height: 1.7; }
    .success-icon { flex-shrink: 0; font-size: 16px; line-height: 1.6; }
    .success strong { color: #34d399; }

    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; font-size: 13px; color: #94a3b8; }
    .chip strong { color: var(--text); }

    .p-high   { color: #f87171; }
    .p-medium { color: #fbbf24; }
    .p-low    { color: #34d399; }

    .toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
    .track { width: 40px; height: 22px; border-radius: 11px; position: relative; flex-shrink: 0; }
    .track.on  { background: #4F6EF7; }
    .track.off { background: #1C2236; border: 1px solid var(--border2); }
    .thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; position: absolute; top: 3px; }
    .track.on  .thumb { left: 21px; }
    .track.off .thumb { left: 3px; }

    .cat { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; }
    .cat-open   { background: rgba(99,102,241,.15); color: #818cf8; }
    .cat-prog   { background: rgba(245,158,11,.15);  color: #fbbf24; }
    .cat-done   { background: rgba(16,185,129,.15);  color: #34d399; }
    .cat-cancel { background: rgba(100,116,139,.15); color: #94a3b8; }

    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

    footer { border-top: 1px solid var(--border); padding: 28px 0; margin-top: 60px; color: var(--muted2); font-size: 12px; }
  </style>
</head>
<body>

<nav class="sidebar">
  <div class="sidebar-logo">
    <div class="sidebar-logo-name">FlowTask</div>
    <div class="sidebar-logo-sub">v1.6.0 · Полная документация · май 2026</div>
  </div>

  <div class="nav-group">
    <div class="nav-group-label">Введение</div>
    <a class="nav-link" href="#overview">Обзор системы</a>
    <a class="nav-link" href="#stack">Технический стек</a>
    <a class="nav-link" href="#infra">Инфраструктура</a>
    <a class="nav-link" href="#deploy">Деплой и CI/CD</a>
  </div>

  <div class="nav-group">
    <div class="nav-group-label">Доступ</div>
    <a class="nav-link" href="#auth">Авторизация (логин/пароль)</a>
    <a class="nav-link" href="#sso">SSO — Keycloak и Avanpost ✦</a>
    <a class="nav-link" href="#mfa">2FA / TOTP — второй фактор ✦</a>
    <a class="nav-link" href="#roles">Роли и права</a>
    <a class="nav-link" href="#apikeys">API-ключи</a>
  </div>

  <div class="nav-group">
    <div class="nav-group-label">Основной функционал</div>
    <a class="nav-link" href="#workspaces">Воркспейсы</a>
    <a class="nav-link" href="#workflows">Воркфлоу</a>
    <a class="nav-link" href="#boards">Доски</a>
    <a class="nav-link" href="#tasks">Задачи</a>
    <a class="nav-link" href="#drawer">Карточка задачи</a>
    <a class="nav-link" href="#subtasks">Подзадачи (макс. 5 уровней) ✦</a>
    <a class="nav-link" href="#bulk">Массовые операции ✦</a>
    <a class="nav-link" href="#search">Глобальный поиск Cmd+K ✦</a>
    <a class="nav-link" href="#mytasks">Мои задачи — аккордеон ✦</a>
  </div>

  <div class="nav-group">
    <div class="nav-group-label">Дополнительно</div>
    <a class="nav-link" href="#labels">Метки</a>
    <a class="nav-link" href="#checklists">Чеклисты</a>
    <a class="nav-link" href="#comments">Комментарии</a>
    <a class="nav-link" href="#notifications">Уведомления ✦</a>
    <a class="nav-link" href="#history">История изменений</a>
    <a class="nav-link" href="#feedback">Обратная связь</a>
    <a class="nav-link" href="#admin">Администрирование</a>
    <a class="nav-link" href="#integrations">Интеграции</a>
  </div>

  <div class="nav-group">
    <div class="nav-group-label">Безопасность</div>
    <a class="nav-link" href="#security">Защита системы</a>
    <a class="nav-link" href="#ratelimit">Лимиты запросов</a>
    <a class="nav-link" href="#email">Email и сброс пароля</a>
    <a class="nav-link" href="#auditlog">Audit-лог действий ✦</a>
  </div>

  <div class="nav-group">
    <div class="nav-group-label">Справочник</div>
    <a class="nav-link" href="#models">Модели данных</a>
    <a class="nav-link" href="#envvars">Переменные окружения</a>
    <a class="nav-link" href="#api">API-справочник</a>
  </div>
</nav>

<div class="main">

  <div class="hero">
    <div class="badge">Документация системы</div>
    <h1>FlowTask —<br><span>полное руководство</span></h1>
    <p>Всё о системе: от «что это такое» до «как это устроено внутри». Версия <strong style="color:#34d399">v1.6.0</strong>, май 2026. Разделы, отмеченные <strong style="color:#34d399">✦</strong>, содержат новые или обновлённые возможности.</p>
  </div>

  <!-- ════ OVERVIEW ════ -->
  <div class="section" id="overview">
    <div class="section-label">Введение</div>
    <div class="section-title">Обзор системы</div>
    <div class="section-sub">FlowTask — внутренний таск-трекер для командной работы. Как Jira или Trello, но свой, без зависимости от внешних облаков.</div>

    <div class="card-grid">
      <div class="card"><div class="card-icon">🗂️</div><h4>Воркспейсы</h4><p>Отдельные «комнаты» для разных команд или проектов. Данные не пересекаются.</p></div>
      <div class="card"><div class="card-icon">📋</div><h4>Kanban-доски</h4><p>Карточки задач по колонкам-статусам. Перетащил карточку — изменил статус.</p></div>
      <div class="card"><div class="card-icon">✅</div><h4>Задачи</h4><p>Подзадачи, чеклисты, метки, комментарии, история изменений.</p></div>
      <div class="card"><div class="card-icon">🔑</div><h4>REST API</h4><p>Полный доступ через JWT или API-ключи. Интеграция с любыми внешними системами.</p></div>
      <div class="card"><div class="card-icon">🔒</div><h4>Безопасность</h4><p>Защита от брутфорса, хеширование секретов, audit-лог, лимиты запросов.</p></div>
      <div class="card"><div class="card-icon">🚀</div><h4>Деплой</h4><p>GitHub Actions → rsync на VPS → PM2. Staging и production.</p></div>
    </div>
  </div>

  <!-- ════ STACK ════ -->
  <div class="section" id="stack">
    <div class="section-label">Введение</div>
    <div class="section-title">Технический стек</div>
    <div class="section-sub">Монорепозиторий: backend и frontend в одном репозитории <code>NovakPAai/flow-tasks</code>.</div>

    <div class="subsection">
      <div class="subsection-title">Backend</div>
      <div class="chips">
        <div class="chip"><strong>Node.js 20</strong> LTS</div>
        <div class="chip"><strong>TypeScript 5.7</strong></div>
        <div class="chip"><strong>Express 4</strong></div>
        <div class="chip"><strong>Prisma 6</strong> ORM</div>
        <div class="chip"><strong>PostgreSQL 16</strong></div>
        <div class="chip"><strong>Redis 7</strong></div>
        <div class="chip"><strong>Zod</strong> — валидация</div>
        <div class="chip"><strong>JWT</strong> + bcryptjs</div>
        <div class="chip"><strong>openid-client v6</strong> — SSO</div>
        <div class="chip"><strong>nodemailer</strong> — email</div>
        <div class="chip"><strong>Vitest</strong> — тесты</div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Frontend</div>
      <div class="chips">
        <div class="chip"><strong>React 18</strong></div>
        <div class="chip"><strong>TypeScript</strong></div>
        <div class="chip"><strong>Vite 6</strong></div>
        <div class="chip"><strong>Ant Design 5</strong> — UI-кит</div>
        <div class="chip"><strong>Zustand</strong> — стор</div>
        <div class="chip"><strong>React Router v6</strong></div>
        <div class="chip"><strong>Axios</strong></div>
        <div class="chip"><strong>@hello-pangea/dnd</strong> — drag&amp;drop</div>
        <div class="chip"><strong>Playwright</strong> — E2E</div>
      </div>
    </div>
  </div>

  <!-- ════ INFRA ════ -->
  <div class="section" id="infra">
    <div class="section-label">Введение</div>
    <div class="section-title">Инфраструктура</div>
    <div class="section-sub">Сервер — VPS Ubuntu, процессы управляются через PM2. Локальная разработка через Docker Compose.</div>

    <div class="subsection">
      <div class="subsection-title">Docker Compose (локальная разработка)</div>
      <div class="code-block">
<span class="cm"># docker-compose.yml</span>
services:
  postgres:   <span class="cm"># PostgreSQL 16 — основная база данных</span>
    port:     <span class="nu">5434</span>:<span class="nu">5432</span>
    user/db:  <span class="st">flowtask</span>

  redis:      <span class="cm"># Redis 7 — быстрый кеш и хранение сессий</span>
    port:     <span class="nu">6380</span>:<span class="nu">6379</span>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Продакшн-сервер</div>
      <div class="card-grid">
        <div class="card"><div class="card-icon">🌐</div><h4>Nginx (порт 3200)</h4><p>Раздаёт статику frontend. Проксирует <code>/api/*</code> на backend :3101. Настроены лимиты запросов и security headers.</p></div>
        <div class="card"><div class="card-icon">⚙️</div><h4>PM2</h4><p>Менеджер процессов. Автоперезапуск backend при сбоях. <code>pm2 logs flowtask-api</code> — логи в реальном времени.</p></div>
        <div class="card"><div class="card-icon">🐘</div><h4>PostgreSQL</h4><p>Основное хранилище. Схема управляется через Prisma миграции.</p></div>
        <div class="card"><div class="card-icon">⚡</div><h4>Redis</h4><p>Кеш + защита от брутфорса + SSO state-токены. При недоступности Redis система продолжает работать.</p></div>
      </div>
    </div>
  </div>

  <!-- ════ DEPLOY ════ -->
  <div class="section" id="deploy">
    <div class="section-label">Введение</div>
    <div class="section-title">Деплой и CI/CD</div>
    <div class="section-sub">GitHub Actions автоматически проверяет каждый PR и деплоит на сервер по команде.</div>

    <div class="subsection">
      <div class="subsection-title">CI (ci.yml) — автоматически на каждый PR</div>
      <div class="steps">
        <div class="step"><div class="step-num">1</div><div><h4>TypeScript check</h4><p>Проверка типов backend и frontend. Ошибки типов блокируют мёрдж.</p></div></div>
        <div class="step"><div class="step-num">2</div><div><h4>Lint (ESLint)</h4><p>Линтинг кода. PR не мёрджится пока lint не зелёный.</p></div></div>
        <div class="step"><div class="step-num">3</div><div><h4>RBAC-проверка</h4><p>Скрипт сканирует все роутеры и проверяет, что нет незащищённых эндпоинтов. Блокирует CI если найдены «голые» маршруты без <code>authenticate</code>.</p></div></div>
        <div class="step"><div class="step-num">4</div><div><h4>Tests (Vitest) + Coverage</h4><p>Unit + integration тесты с реальной БД. Coverage-gate: линии ≥60%, ветки ≥50%, функции ≥60%.</p></div></div>
        <div class="step"><div class="step-num">5</div><div><h4>E2E (Playwright)</h4><p>Сквозные тесты на PR и main. Запускаются с реальными PostgreSQL и Redis через GitHub Actions services.</p></div></div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Deploy (deploy.yml) — запускается вручную</div>
      <div class="steps">
        <div class="step"><div class="step-num">1</div><div><h4>Выбор окружения</h4><p>Параметр <code>staging | production</code> при запуске через GitHub Actions → Run workflow.</p></div></div>
        <div class="step"><div class="step-num">2</div><div><h4>Build</h4><p>Сборка frontend (<code>vite build</code>) и компиляция backend TypeScript.</p></div></div>
        <div class="step"><div class="step-num">3</div><div><h4>rsync на сервер</h4><p>Артефакты синхронизируются в <code>/opt/flowtask/</code> по SSH.</p></div></div>
        <div class="step"><div class="step-num">4</div><div><h4>Prisma migrate deploy</h4><p>Применяются новые миграции к БД. Все миграции аддитивные — никаких разрушающих изменений.</p></div></div>
        <div class="step"><div class="step-num">5</div><div><h4>PM2 reload</h4><p>Zero-downtime рестарт backend-процесса.</p></div></div>
        <div class="step"><div class="step-num">6</div><div><h4>Health check</h4><p>Проверка доступности API. Если упал — деплой считается провалившимся.</p></div></div>
      </div>
    </div>

    <div class="info" style="margin-top:20px">
      <div class="info-icon">💡</div>
      <div>Окружения: <strong>staging-flowtask.ru</strong> (тестирование) и production (основной). Staging деплоится свободно, production требует осознанного выбора.</div>
    </div>
  </div>

  <!-- ════ AUTH ════ -->
  <div class="section" id="auth">
    <div class="section-label">Доступ</div>
    <div class="section-title">Авторизация — логин и пароль</div>
    <div class="section-sub">Стандартный способ входа: email + пароль. Доступен всегда, для всех пользователей системы.</div>

    <div class="subsection">
      <div class="subsection-title">Схема токенов</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Токен</th><th>Где хранится</th><th>Время жизни</th><th>Зачем</th></tr></thead>
          <tbody>
            <tr><td>Access Token (JWT)</td><td>Память браузера (JS-переменная)</td><td>1 час</td><td>Авторизация каждого запроса к API</td></tr>
            <tr><td>Refresh Token</td><td>HttpOnly cookie (JS не видит)</td><td>7 дней</td><td>Тихое обновление access token</td></tr>
            <tr><td>Password Reset Token</td><td>БД (только SHA-256 хеш)</td><td>1 час</td><td>Одноразовая ссылка сброса пароля</td></tr>
            <tr><td>API Key</td><td>Только SHA-256 хеш в БД</td><td>Бессрочно / по дате</td><td>Машинный доступ без логина</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Вход в систему (POST /api/auth/login)</div>
      <div class="steps">
        <div class="step"><div class="step-num">1</div><div><h4>Защита от брутфорса</h4><p>Счётчик ошибочных попыток хранится в Redis по ключу email. 5+ неудачных попыток → блокировка на 15 минут. Redis недоступен → счётчик в памяти процесса (graceful degradation).</p></div></div>
        <div class="step"><div class="step-num">2</div><div><h4>Проверка SSO_ONLY</h4><p>Если у пользователя в БД <code>ssoOnly=true</code> и он не суперадмин — локальный вход заблокирован (403). Все текущие пользователи имеют <code>ssoOnly=false</code> по умолчанию.</p></div></div>
        <div class="step"><div class="step-num">3</div><div><h4>Верификация пароля</h4><p>bcryptjs с 12 раундами соли. Сравнение константного времени — защита от timing-атак.</p></div></div>
        <div class="step"><div class="step-num">4</div><div><h4>Выдача токенов</h4><p>Access token (1h) — в теле ответа. Refresh token — в HttpOnly cookie <code>SameSite=Strict</code>. В БД хранится SHA-256 хеш refresh token, а не сам токен.</p></div></div>
        <div class="step"><div class="step-num">5</div><div><h4>LRU-ротация сессий</h4><p>Максимум 5 активных сессий на пользователя. При создании 6-й — старейшая удаляется. Операция атомарная (Prisma transaction).</p></div></div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Регистрация</div>
      <div class="info">
        <div class="info-icon">ℹ️</div>
        <div>Самостоятельная регистрация создаёт заявку со статусом <strong>PENDING</strong>. Суперадмин одобряет или отклоняет в панели администрирования. До одобрения войти нельзя. Email автоматически формируется из имени и фамилии (домен задаётся в <code>REGISTRATION_DOMAIN</code>).</div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Обновление токена (POST /api/auth/refresh)</div>
      <p style="font-size:14px;color:var(--muted);line-height:1.65">Axios-интерцептор перехватывает 401, автоматически вызывает <code>/auth/refresh</code> (cookie летит автоматически), получает новый access token и повторяет оригинальный запрос. Пользователь ничего не замечает.</p>
    </div>
  </div>

  <!-- ════ SSO ════ -->
  <div class="section" id="sso">
    <div class="section-label">Доступ</div>
    <div class="section-title">SSO — Keycloak и Avanpost <span class="new-badge">новое</span></div>
    <div class="section-sub">Единый вход через корпоративный провайдер идентификации. Поддерживаются Keycloak и Avanpost по стандартному протоколу OIDC/PKCE.</div>

    <div class="success" style="margin-bottom:24px">
      <div class="success-icon">✅</div>
      <div><strong>Обратная совместимость:</strong> SSO выключено по умолчанию (<code>SSO_ENABLED=false</code>). Все существующие пользователи продолжают заходить по логину и паролю без каких-либо изменений. SSO включается только явным выставлением переменных окружения.</div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Как работает PKCE-поток</div>

      <div class="steps">
        <div class="step"><div class="step-num">1</div><div><h4>Пользователь нажимает «Войти через Keycloak»</h4><p>Браузер вызывает <code>GET /api/auth/sso/login</code>. Сервер генерирует случайный <code>state</code> (128-битный), PKCE <code>verifier</code> и <code>challenge</code>. Пара сохраняется в Redis на 5 минут. Пользователь перенаправляется на страницу Keycloak.</p></div></div>
        <div class="step"><div class="step-num">2</div><div><h4>Пользователь вводит корпоративный пароль в Keycloak</h4><p>Это происходит на странице Keycloak, а не FlowTask. FlowTask никогда не видит корпоративный пароль.</p></div></div>
        <div class="step"><div class="step-num">3</div><div><h4>Keycloak перенаправляет на <code>/api/auth/sso/callback</code></h4><p>Сервер проверяет <code>state</code> через атомарный GETDEL из Redis (одноразовое использование, нет риска повторного использования). Обменивает code на токены Keycloak.</p></div></div>
        <div class="step"><div class="step-num">4</div><div><h4>JIT Provisioning — автосоздание пользователя</h4><p>Ищет пользователя по <code>ssoSubjectId = "keycloak:&lt;sub&gt;"</code>. Если не найден — ищет по email (нужен <code>email_verified=true</code>). Если не найден — создаёт нового. Гонка параллельных запросов обрабатывается через P2002 + retry.</p></div></div>
        <div class="step"><div class="step-num">5</div><div><h4>Выдача сессии</h4><p>Сервер устанавливает refresh token cookie (HttpOnly). Перенаправляет на <code>/?sso_return=1</code>. Фронтенд вызывает <code>/auth/refresh</code> и получает access token — точно так же как после обычного логина. Никаких токенов в URL.</p></div></div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">JIT Provisioning — автоматическое создание пользователей</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Ситуация</th><th>Что происходит</th></tr></thead>
          <tbody>
            <tr><td>Первый вход через SSO, пользователь новый</td><td>Создаётся новый аккаунт с данными из claims (имя, email). Пароль не задаётся.</td></tr>
            <tr><td>Пользователь уже есть в FlowTask (совпадение по email)</td><td>Аккаунты связываются — добавляется <code>ssoSubjectId</code>. Требуется <code>email_verified=true</code> в токене IdP.</td></tr>
            <tr><td>Повторный вход через SSO</td><td>Поиск по <code>ssoSubjectId</code> — мгновенно, без создания нового аккаунта.</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Настройка SSO (переменные окружения)</div>
      <div class="code-block">
<span class="cm"># Включение SSO</span>
<span class="st">SSO_ENABLED</span>=<span class="kw">true</span>         <span class="cm"># false по умолчанию — SSO выключено</span>
<span class="st">SSO_ONLY</span>=<span class="kw">false</span>           <span class="cm"># true = запретить локальный вход (кроме суперадминов)</span>

<span class="cm"># Провайдер</span>
<span class="st">OIDC_PROVIDER</span>=<span class="st">keycloak</span>  <span class="cm"># или avanpost</span>
<span class="st">OIDC_ISSUER_URL</span>=<span class="st">https://auth.example.com/realms/flowtask</span>
<span class="st">OIDC_CLIENT_ID</span>=<span class="st">flowtask</span>
<span class="st">OIDC_CLIENT_SECRET</span>=<span class="st">...</span>
<span class="st">OIDC_REDIRECT_URI</span>=<span class="st">https://flowtask.example.com/api/auth/sso/callback</span>
<span class="st">OIDC_SCOPE</span>=<span class="st">openid profile email</span>  <span class="cm"># по умолчанию</span>
      </div>
      <div class="notice" style="margin-top:14px">
        <div class="notice-icon">⚠️</div>
        <div>При <code>SSO_ENABLED=true</code> сервер проверяет на старте, что все OIDC-переменные заданы. Если чего-то нет — <strong>process.exit(1)</strong> с явным сообщением об ошибке. Неправильная конфигурация не пройдёт незамеченной.</div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Кнопка SSO на странице входа</div>
      <p style="font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:12px">Фронтенд запрашивает <code>GET /api/auth/sso/status</code> при загрузке страницы входа. Если <code>enabled: false</code> — кнопка не отображается вообще. Если статус-эндпоинт не отвечает — кнопки тоже нет (fail-safe).</p>
      <div class="two-col">
        <div class="card"><div class="toggle-row"><div class="track off"><div class="thumb"></div></div><strong style="font-size:14px">SSO_ENABLED=false</strong></div><p style="font-size:13px;color:var(--muted)">Кнопка «Войти через SSO» не показывается. Только форма email + пароль.</p></div>
        <div class="card" style="border-color:rgba(99,102,241,.35)"><div class="toggle-row"><div class="track on"><div class="thumb"></div></div><strong style="font-size:14px">SSO_ENABLED=true</strong></div><p style="font-size:13px;color:var(--muted)">Появляется кнопка «Войти через Keycloak» (или Avanpost). Локальный вход остаётся доступным.</p></div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Эндпоинты SSO</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Метод</th><th>Путь</th><th>Описание</th></tr></thead>
          <tbody>
            <tr><td><span class="tag tag-method-get">GET</span></td><td><code>/api/auth/sso/status</code></td><td>Показывает включён ли SSO и какой провайдер</td></tr>
            <tr><td><span class="tag tag-method-get">GET</span></td><td><code>/api/auth/sso/login?returnUrl=/</code></td><td>Перенаправление на страницу входа провайдера</td></tr>
            <tr><td><span class="tag tag-method-get">GET</span></td><td><code>/api/auth/sso/callback</code></td><td>Обработка ответа от провайдера (PKCE)</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- ════ MFA ════ -->
  <div class="section" id="mfa">
    <div class="section-label">Доступ</div>
    <div class="section-title">2FA / TOTP — второй фактор <span class="new-badge">новое</span></div>
    <div class="section-sub">Двухфакторная аутентификация через TOTP делегируется IdP (Avanpost / Keycloak). FlowTask не хранит TOTP-секреты и не показывает экран ввода кода — это полностью на стороне провайдера идентификации. FlowTask только проверяет результат в токене.</div>

    <div class="info" style="margin-bottom:28px">
      <div class="info-icon">ℹ️</div>
      <div><strong>Для кого этот раздел:</strong> сотрудники ИБ, настраивающие Keycloak или Avanpost для интеграции с FlowTask. Здесь описано, что именно FlowTask ожидает от IdP и как включить принудительный второй фактор на уровне воркспейса.</div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Три режима авторизации</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>#</th><th>Режим</th><th>Кто выполняет вход</th><th>Второй фактор</th><th>Настройка</th></tr></thead>
          <tbody>
            <tr>
              <td>1</td>
              <td><strong>Локальный</strong></td>
              <td>FlowTask (email + пароль)</td>
              <td class="no">нет</td>
              <td>Только <code>SSO_ENABLED=false</code></td>
            </tr>
            <tr>
              <td>2</td>
              <td><strong>SSO</strong></td>
              <td>Avanpost / Keycloak</td>
              <td class="no">нет</td>
              <td><code>SSO_ENABLED=true</code>, TOTP не настроен в IdP</td>
            </tr>
            <tr>
              <td>3</td>
              <td><strong>SSO + TOTP</strong></td>
              <td>Avanpost / Keycloak → экран TOTP IdP</td>
              <td class="yes">✓ TOTP</td>
              <td><code>SSO_ENABLED=true</code> + TOTP настроен в IdP + <code>requireMfa</code> в воркспейсе</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="notice" style="margin-top:14px">
        <div class="notice-icon">⚠️</div>
        <div>FlowTask <strong>не реализует</strong> TOTP самостоятельно для режима SSO. Экран ввода кода, привязка устройства, QR-код — всё это происходит в Avanpost / Keycloak. FlowTask только читает <code>amr</code> claim из OIDC id_token.</div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Что такое amr claim и зачем он нужен</div>
      <p style="font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:16px">
        <strong style="color:var(--text)">amr (Authentication Method References)</strong> — стандартное поле OIDC id_token (RFC 8176). Содержит список методов аутентификации, которые использовал пользователь при входе. FlowTask читает это поле и сохраняет его в Redis-сессию при SSO-входе.
      </p>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Значение amr</th><th>Смысл</th><th>Удовлетворяет MFA?</th></tr></thead>
          <tbody>
            <tr><td><code>pwd</code></td><td>Только пароль</td><td class="no">нет</td></tr>
            <tr><td><code>totp</code></td><td>TOTP (Time-based One-Time Password)</td><td class="yes">✓ да</td></tr>
            <tr><td><code>otp</code></td><td>OTP (одноразовый код)</td><td class="yes">✓ да</td></tr>
            <tr><td><code>mfa</code></td><td>Многофакторная аутентификация (общий)</td><td class="yes">✓ да</td></tr>
            <tr><td><code>hwk</code></td><td>Аппаратный ключ (YubiKey и др.)</td><td class="yes">✓ да</td></tr>
            <tr><td><code>swk</code></td><td>Программный ключ (passkey)</td><td class="yes">✓ да</td></tr>
            <tr><td><code>pwd</code> + <code>totp</code></td><td>Пароль и TOTP (типичный Keycloak)</td><td class="yes">✓ да</td></tr>
          </tbody>
        </table>
      </div>
      <p style="font-size:13px;color:var(--muted);margin-top:12px;line-height:1.6">Если <code>amr</code> отсутствует в токене или не содержит ни одного из значений выше — FlowTask считает, что второй фактор не пройден.</p>
    </div>

    <div class="subsection">
      <div class="subsection-title">Настройка Keycloak — включение обязательного TOTP</div>
      <div class="steps">
        <div class="step"><div class="step-num">1</div><div>
          <h4>Создать Client для FlowTask</h4>
          <p>Realm → Clients → Create. <code>Client ID</code> = значение <code>OIDC_CLIENT_ID</code> в FlowTask. <code>Client Protocol</code> = openid-connect. <code>Access Type</code> = confidential. <code>Valid Redirect URIs</code> = значение <code>OIDC_REDIRECT_URI</code>.</p>
        </div></div>
        <div class="step"><div class="step-num">2</div><div>
          <h4>Включить PKCE</h4>
          <p>Вкладка Advanced Settings → <code>Proof Key for Code Exchange Code Challenge Method</code> = <code>S256</code>. FlowTask использует PKCE для защиты authorization code flow.</p>
        </div></div>
        <div class="step"><div class="step-num">3</div><div>
          <h4>Настроить обязательный TOTP (Authentication Flow)</h4>
          <p>Authentication → Flows → Browser Flow → Duplicate. В копии добавить execution <code>OTP Form</code> с требованием <code>REQUIRED</code>. Привязать новый flow к клиенту: Client → Authentication Flow Overrides → Browser Flow.</p>
        </div></div>
        <div class="step"><div class="step-num">4</div><div>
          <h4>Убедиться, что amr включён в id_token</h4>
          <p>Client Scopes → openid → Mappers → Add Mapper → User Attribute. Или проверить, что встроенный mapper <code>amr</code> активен. Keycloak ≥ 18.x включает <code>amr</code> автоматически при использовании OTP.</p>
        </div></div>
        <div class="step"><div class="step-num">5</div><div>
          <h4>Выдать scope профиля и email</h4>
          <p><code>OIDC_SCOPE=openid profile email</code> — FlowTask запрашивает эти scopes. Убедитесь, что клиент имеет доступ к <code>email</code>, <code>email_verified</code>, <code>name</code> / <code>given_name</code> + <code>family_name</code>.</p>
        </div></div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Настройка Avanpost — включение обязательного TOTP</div>
      <div class="steps">
        <div class="step"><div class="step-num">1</div><div>
          <h4>Создать OIDC-приложение</h4>
          <p>Avanpost Admin Console → Applications → New → OIDC. <code>Client ID</code> и <code>Client Secret</code> → в переменные <code>OIDC_CLIENT_ID</code> / <code>OIDC_CLIENT_SECRET</code>. <code>Redirect URI</code> = значение <code>OIDC_REDIRECT_URI</code>.</p>
        </div></div>
        <div class="step"><div class="step-num">2</div><div>
          <h4>Включить PKCE</h4>
          <p>В настройках приложения → Token Endpoint Auth Method = none (или client_secret_basic) + включить Code Challenge = S256.</p>
        </div></div>
        <div class="step"><div class="step-num">3</div><div>
          <h4>Настроить политику MFA</h4>
          <p>Security Policies → MFA Policy → Add Rule: применить для группы пользователей FlowTask, метод второго фактора = TOTP. Назначить политику на приложение FlowTask.</p>
        </div></div>
        <div class="step"><div class="step-num">4</div><div>
          <h4>Проверить amr в id_token</h4>
          <p>Avanpost ≥ 4.x включает <code>amr</code> в id_token автоматически при прохождении TOTP. Для более старых версий — уточнить у вендора или добавить кастомный claim mapper. Ожидаемое значение: <code>["totp"]</code> или <code>["password","totp"]</code>.</p>
        </div></div>
        <div class="step"><div class="step-num">5</div><div>
          <h4>Выдать claims профиля</h4>
          <p>Убедиться, что приложение получает: <code>sub</code>, <code>email</code>, <code>email_verified</code>, <code>name</code> (или <code>given_name</code> + <code>family_name</code>). FlowTask использует эти поля для JIT provisioning.</p>
        </div></div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Переменные окружения для режима SSO + TOTP</div>
      <div class="code-block">
<span class="cm"># Базовый SSO (обязательно)</span>
<span class="st">SSO_ENABLED</span>=<span class="kw">true</span>
<span class="st">OIDC_PROVIDER</span>=<span class="st">avanpost</span>          <span class="cm"># или keycloak</span>
<span class="st">OIDC_ISSUER_URL</span>=<span class="st">https://sso.company.ru/realms/flowtask</span>
<span class="st">OIDC_CLIENT_ID</span>=<span class="st">flowtask-prod</span>
<span class="st">OIDC_CLIENT_SECRET</span>=<span class="st">&lt;секрет из IdP&gt;</span>
<span class="st">OIDC_REDIRECT_URI</span>=<span class="st">https://flowtask.company.ru/api/auth/sso/callback</span>
<span class="st">OIDC_SCOPE</span>=<span class="st">openid profile email</span>   <span class="cm"># по умолчанию, amr приходит автоматически</span>

<span class="cm"># Режим SSO-only (опционально)</span>
<span class="st">SSO_ONLY</span>=<span class="kw">true</span>    <span class="cm"># запретить локальный вход для всех, кроме суперадминов</span>
      </div>
      <div class="notice" style="margin-top:14px">
        <div class="notice-icon">⚠️</div>
        <div>Дополнительных переменных для TOTP нет — второй фактор настраивается целиком в IdP. FlowTask автоматически читает <code>amr</code> из каждого id_token при SSO-входе.</div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Принудительный MFA на уровне воркспейса</div>
      <p style="font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:16px">
        Владелец воркспейса (OWNER) может включить требование второго фактора для своего воркспейса независимо от других воркспейсов. Это дополнительный уровень защиты поверх настроек IdP.
      </p>
      <div class="steps">
        <div class="step"><div class="step-num">1</div><div>
          <h4>OWNER включает requireMfa в настройках воркспейса</h4>
          <p>Настройки воркспейса → вкладка Безопасность → переключатель «Обязательная 2FA». После сохранения FlowTask проставляет grace period всем участникам без активного TOTP в сессии.</p>
        </div></div>
        <div class="step"><div class="step-num">2</div><div>
          <h4>Grace period — 7 дней (настраивается)</h4>
          <p>Участники, у которых нет <code>amr: totp</code> в текущей сессии, получают 7 дней на настройку TOTP в Avanpost / Keycloak. В это время они видят баннер с обратным отсчётом.</p>
        </div></div>
        <div class="step"><div class="step-num">3</div><div>
          <h4>После истечения grace period — доступ заблокирован</h4>
          <p>Попытка войти в воркспейс без <code>amr: totp</code> → 403. Пользователь получает инструкцию настроить TOTP в корпоративном IdP и зайти повторно.</p>
        </div></div>
      </div>
      <div class="success" style="margin-top:14px">
        <div class="success-icon">✅</div>
        <div><strong>Воркспейсы независимы:</strong> включение requireMfa в одном воркспейсе не влияет на другие. Пользователь может работать в воркспейсах без MFA, даже если в одном из них MFA обязателен (при условии, что он не заходит туда без TOTP).</div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Что происходит при входе — схема проверки</div>
      <div class="steps">
        <div class="step"><div class="step-num">1</div><div>
          <h4>Пользователь проходит SSO</h4>
          <p>FlowTask получает id_token от IdP. Из него извлекается <code>amr</code> (например, <code>["totp"]</code>) и сохраняется в Redis вместе с сессией.</p>
        </div></div>
        <div class="step"><div class="step-num">2</div><div>
          <h4>Пользователь открывает воркспейс</h4>
          <p>Middleware <code>workspaceMfaGuard</code> проверяет: включён ли <code>requireMfa</code> для этого воркспейса?</p>
        </div></div>
        <div class="step"><div class="step-num">3</div><div>
          <h4>requireMfa = false → пропустить</h4>
          <p>Проверка amr не выполняется. Запрос продолжается штатно.</p>
        </div></div>
        <div class="step"><div class="step-num">4</div><div>
          <h4>requireMfa = true → проверить amr</h4>
          <p>Если в сессии есть <code>amr: totp/otp/mfa/hwk/swk</code> → пропустить. Иначе — проверить grace period. Если grace period активен → пропустить с баннером. Если grace period истёк → 403.</p>
        </div></div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Минимальные требования к IdP</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Требование</th><th>Keycloak</th><th>Avanpost</th></tr></thead>
          <tbody>
            <tr><td>Версия с поддержкой PKCE</td><td>≥ 7.x</td><td>≥ 3.x</td></tr>
            <tr><td>amr claim в id_token при TOTP</td><td>≥ 18.x (автоматически)</td><td>≥ 4.x (проверить у вендора)</td></tr>
            <tr><td>email_verified claim</td><td class="yes">✓ есть</td><td class="yes">✓ есть</td></tr>
            <tr><td>Поддержка S256 PKCE</td><td class="yes">✓ есть</td><td class="yes">✓ есть</td></tr>
            <tr><td>Настройка обязательного TOTP через Policy</td><td class="yes">✓ Authentication Flow</td><td class="yes">✓ Security Policy</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Обновления v1.6 — Gap-13</div>
      <div class="info">
        <div class="info-icon">🆕</div>
        <div>
          <strong>AMR enforcement при SSO-входе:</strong> FlowTask теперь явно проверяет наличие <code>totp</code> или <code>mfa</code> в <code>amr[]</code> id_token при каждом SSO-входе — не только на уровне воркспейса.<br><br>
          <strong>Grace period:</strong> настраивается через переменную <code>MFA_GRACE_DAYS</code> (по умолчанию 7). Пользователи без активного TOTP видят баннер с обратным отсчётом.<br><br>
          <strong>Confirm-модал при отключении MFA:</strong> пользователь обязан подтвердить действие перед отключением второго фактора.<br><br>
          <strong>Audit-события:</strong> <code>mfa.setup.complete</code> при настройке TOTP, <code>mfa.disable</code> при отключении — оба попадают в AuditLog с SIEM-тегами.
        </div>
      </div>
    </div>
  </div>

  <!-- ════ ROLES ════ -->
  <div class="section" id="roles">
    <div class="section-label">Доступ</div>
    <div class="section-title">Роли и права</div>
    <div class="section-sub">Права управляются на двух уровнях: глобальный (суперадмин) и воркспейс (три роли).</div>

    <div class="subsection">
      <div class="subsection-title">Глобальный уровень</div>
      <div class="two-col">
        <div class="card"><div class="card-icon">👑</div><h4><span class="role-badge r-super">Суперадмин</span></h4><p>Полный доступ к панели администрирования: все пользователи, создание учёток, одобрение заявок, выдача суперадмин-прав. <strong>Всегда может войти по паролю</strong>, даже если включён SSO_ONLY.</p></div>
        <div class="card"><div class="card-icon">👤</div><h4>Обычный пользователь</h4><p>Работает в рамках воркспейсов, к которым добавлен. Видит только свои пространства (если они приватные).</p></div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Роли в воркспейсе</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Действие</th><th><span class="role-badge r-owner">Owner</span></th><th><span class="role-badge r-member">Member</span></th><th><span class="role-badge r-viewer">Viewer</span></th></tr></thead>
          <tbody>
            <tr><td>Создание и редактирование задач</td><td class="yes">Да</td><td class="yes">Да</td><td class="no">Нет</td></tr>
            <tr><td>Просмотр задач (публичные доски)</td><td class="yes">Да</td><td class="yes">Да</td><td class="yes">Да</td></tr>
            <tr><td>Просмотр приватных досок</td><td class="yes">Да</td><td class="yes">Да</td><td class="no">Нет</td></tr>
            <tr><td>Создание / настройка досок</td><td class="yes">Да</td><td class="yes">Да</td><td class="no">Нет</td></tr>
            <tr><td>Управление воркфлоу и метками</td><td class="yes">Да</td><td class="no">Нет</td><td class="no">Нет</td></tr>
            <tr><td>Приглашение участников</td><td class="yes">Да</td><td class="no">Нет</td><td class="no">Нет</td></tr>
            <tr><td>Смена ролей участников</td><td class="yes">Да</td><td class="no">Нет</td><td class="no">Нет</td></tr>
            <tr><td>Удаление воркспейса</td><td class="yes">Да</td><td class="no">Нет</td><td class="no">Нет</td></tr>
          </tbody>
        </table>
      </div>
      <div class="info" style="margin-top:14px">
        <div class="info-icon">💡</div>
        <div>Owner не может понизить сам себя — нужен второй Owner. Роль применяется немедленно, без перелогина.</div>
      </div>
    </div>
  </div>

  <!-- ════ API KEYS ════ -->
  <div class="section" id="apikeys">
    <div class="section-label">Доступ</div>
    <div class="section-title">API-ключи</div>
    <div class="section-sub">Для машинной интеграции без сессий пользователя — вместо JWT используются API-ключи.</div>

    <div class="steps">
      <div class="step"><div class="step-num">1</div><div><h4>Создание ключа</h4><p>Профиль → вкладка «API Keys» → «Создать ключ». Задайте метку (label) и опциональную дату истечения. Ключ формата <code>ft_&lt;64 символа&gt;</code> отображается <strong>один раз</strong>.</p></div></div>
      <div class="step"><div class="step-num">2</div><div><h4>Что хранится в БД</h4><p>Только <code>keyHash</code> (SHA-256), <code>keyPrefix</code> (первые 12 символов для идентификации), <code>label</code>, <code>isActive</code>, <code>expiresAt</code>, <code>lastUsedAt</code>.</p></div></div>
      <div class="step"><div class="step-num">3</div><div><h4>Использование</h4><p>Заголовок <code>Authorization: Bearer ft_ваш_ключ</code>. Права = правам создавшего пользователя.</p></div></div>
      <div class="step"><div class="step-num">4</div><div><h4>Отзыв</h4><p>Профиль → API Keys → кнопка удаления. Ключ становится недействительным мгновенно.</p></div></div>
    </div>
  </div>

  <!-- ════ WORKSPACES ════ -->
  <div class="section" id="workspaces">
    <div class="section-label">Основной функционал</div>
    <div class="section-title">Воркспейсы</div>
    <div class="section-sub">Воркспейс — изолированное рабочее пространство с досками, участниками и настройками.</div>

    <div class="subsection">
      <div class="subsection-title">Настройки (⚙️ → вкладки)</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Вкладка</th><th>Что можно сделать</th></tr></thead>
          <tbody>
            <tr><td>Участники</td><td>Список членов с ролями, приглашение по email, смена роли, удаление участника</td></tr>
            <tr><td>Воркфлоу</td><td>Создание и редактирование наборов статусов для досок воркспейса</td></tr>
            <tr><td>Метки</td><td>Создание / редактирование / удаление меток с выбором цвета</td></tr>
            <tr><td>История</td><td>Хронологический лог всех событий воркспейса</td></tr>
            <tr><td>Основное</td><td>Название, описание, переключатель приватности, удаление воркспейса</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Приватный режим</div>
      <div class="two-col">
        <div class="card"><div class="toggle-row"><div class="track off"><div class="thumb"></div></div><strong style="font-size:14px">Публичное</strong></div><p style="font-size:13px;color:var(--muted)">Видно всем авторизованным пользователям в общем списке.</p></div>
        <div class="card" style="border-color:rgba(99,102,241,.35)"><div class="toggle-row"><div class="track on"><div class="thumb"></div></div><strong style="font-size:14px">Приватное</strong></div><p style="font-size:13px;color:var(--muted)">Скрыто из публичного списка. Только явно добавленные участники.</p></div>
      </div>
    </div>
  </div>

  <!-- ════ WORKFLOWS ════ -->
  <div class="section" id="workflows">
    <div class="section-label">Основной функционал</div>
    <div class="section-title">Воркфлоу</div>
    <div class="section-sub">Воркфлоу — набор статусов и разрешённых переходов между ними. Каждая доска привязана к одному воркфлоу.</div>

    <div class="subsection">
      <div class="subsection-title">Категории статусов</div>
      <div class="card-grid">
        <div class="card"><span class="cat cat-open">OPEN</span><p style="margin-top:10px;font-size:13px;color:var(--muted)">Задача открыта, работа не начата.</p></div>
        <div class="card"><span class="cat cat-prog">IN_PROGRESS</span><p style="margin-top:10px;font-size:13px;color:var(--muted)">Задача в работе.</p></div>
        <div class="card"><span class="cat cat-done">DONE</span><p style="margin-top:10px;font-size:13px;color:var(--muted)">Задача завершена успешно.</p></div>
        <div class="card"><span class="cat cat-cancel">CANCELLED</span><p style="margin-top:10px;font-size:13px;color:var(--muted)">Задача отменена.</p></div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Режимы переходов</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Режим</th><th>Поведение</th><th>Когда использовать</th></tr></thead>
          <tbody>
            <tr><td>FORWARD_ONLY</td><td>Только вперёд по списку. Откат невозможен.</td><td>Строгие процессы без возврата</td></tr>
            <tr><td>BIDIRECTIONAL</td><td>В обоих направлениях между любыми статусами.</td><td>Гибкие команды</td></tr>
            <tr><td>CUSTOM</td><td>Матрица переходов задаётся вручную.</td><td>Сложные процессы</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- ════ BOARDS ════ -->
  <div class="section" id="boards">
    <div class="section-label">Основной функционал</div>
    <div class="section-title">Доски</div>
    <div class="section-sub">Доска — основное место работы с задачами. Каждая задача получает уникальный <code>issueKey</code> (например <code>FT-42</code>).</div>

    <div class="subsection">
      <div class="subsection-title">Режимы отображения</div>
      <div class="card-grid">
        <div class="card"><div class="card-icon">🗂️</div><h4>Kanban</h4><p>Колонки по статусам. Карточки перетаскиваются мышкой. Подгрузка до 100 задач на статус.</p></div>
        <div class="card"><div class="card-icon">📋</div><h4>Список</h4><p>Табличное представление. Сортировка и инлайн-редактирование полей.</p></div>
        <div class="card"><div class="card-icon">📅</div><h4>Календарь</h4><p>Задачи по датам. Оценка загрузки команды по дням.</p></div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Фильтры на доске <span class="new-badge">улучшено</span></div>
      <div class="chips">
        <div class="chip">Статус</div><div class="chip">Приоритет</div><div class="chip">Исполнитель</div>
        <div class="chip">Метки</div><div class="chip">Дедлайн (от / до)</div><div class="chip">Сброс всех фильтров</div>
      </div>
      <div class="info" style="margin-top:14px">
        <div class="info-icon">💡</div>
        <div><strong>Серверная фильтрация:</strong> фильтры выполняются на бэкенде, не в браузере. Параметры синхронизируются с URL — можно скопировать ссылку с текущими фильтрами и отправить коллеге. Работает для Kanban и List View одновременно.</div>
      </div>
    </div>
  </div>

  <!-- ════ TASKS ════ -->
  <div class="section" id="tasks">
    <div class="section-label">Основной функционал</div>
    <div class="section-title">Задачи</div>
    <div class="section-sub">Центральная сущность системы. Уникальный ключ, статус, полный набор атрибутов.</div>

    <div class="subsection">
      <div class="subsection-title">Поля задачи</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Поле</th><th>Значения</th><th>Примечание</th></tr></thead>
          <tbody>
            <tr><td>Issue Key</td><td><code>FT-1</code>, <code>FT-42</code></td><td>Уникальный ID, автоинкремент на доске</td></tr>
            <tr><td>Название</td><td>Текст</td><td>Обязательное</td></tr>
            <tr><td>Описание</td><td>Текст</td><td>Многострочный</td></tr>
            <tr><td>Статус</td><td>Из воркфлоу доски</td><td>Определяет колонку на Kanban</td></tr>
            <tr><td>Приоритет</td><td><span class="p-high">HIGH</span> / <span class="p-medium">MEDIUM</span> / <span class="p-low">LOW</span> / не задан</td><td>Иконка на карточке</td></tr>
            <tr><td>Исполнитель</td><td>Участник воркспейса</td><td>Используется в «Мои задачи»</td></tr>
            <tr><td>Дедлайн / Дата начала</td><td>Дата</td><td>Календарь и фильтры</td></tr>
            <tr><td>Метки</td><td>Цветные теги</td><td>Множественный выбор</td></tr>
            <tr><td>Родительская задача</td><td>ID задачи</td><td>Для вложенности</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Создание задачи</div>
      <div class="steps">
        <div class="step"><div class="step-num">1</div><div><h4>Быстрое создание на Kanban</h4><p>Кнопка «+ Добавить» сверху нужной колонки → название → Enter.</p></div></div>
        <div class="step"><div class="step-num">2</div><div><h4>Подзадача</h4><p>Карточка задачи → вкладка «Подзадачи» → «Добавить подзадачу».</p></div></div>
      </div>
    </div>
  </div>

  <!-- ════ DRAWER ════ -->
  <div class="section" id="drawer">
    <div class="section-label">Основной функционал</div>
    <div class="section-title">Карточка задачи (Drawer)</div>
    <div class="section-sub">Клик по задаче открывает боковую панель с пятью вкладками. Все поля редактируются на месте.</div>

    <div class="table-wrap">
      <table>
        <thead><tr><th>Вкладка</th><th>Содержимое</th></tr></thead>
        <tbody>
          <tr><td>Детали</td><td>Все поля: статус, приоритет, исполнитель, дедлайн, метки, описание</td></tr>
          <tr><td>Подзадачи</td><td>Дерево дочерних задач — добавить или открыть любую</td></tr>
          <tr><td>Комментарии</td><td>Тред обсуждения: создание, редактирование, удаление своих</td></tr>
          <tr><td>Чеклист</td><td>Один или несколько чеклистов с пунктами и чекбоксами</td></tr>
          <tr><td>История</td><td>Полный audit-лог изменений задачи: кто, что, когда</td></tr>
        </tbody>
      </table>
    </div>

    <div class="subsection">
      <div class="subsection-title">Горячие клавиши</div>
      <div class="two-col">
        <div class="card"><code>Ctrl+S</code> / <code>Cmd+S</code><p style="margin-top:8px;font-size:13px;color:var(--muted)">Сохранить изменения</p></div>
        <div class="card"><code>Escape</code><p style="margin-top:8px;font-size:13px;color:var(--muted)">Закрыть карточку</p></div>
      </div>
    </div>
  </div>

  <!-- ════ SUBTASKS ════ -->
  <div class="section" id="subtasks">
    <div class="section-label">Основной функционал</div>
    <div class="section-title">Подзадачи <span class="new-badge">обновлено</span></div>
    <div class="section-sub">До 5 уровней вложенности задач через materialized path в БД.</div>

    <div class="subsection">
      <div class="subsection-title">Ограничение вложенности</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Уровень</th><th>Пример</th><th>Статус</th></tr></thead>
          <tbody>
            <tr><td>Уровень 1 (корневые)</td><td>FT-1</td><td class="yes">Разрешено</td></tr>
            <tr><td>Уровень 2 (подзадачи)</td><td>Подзадача FT-1</td><td class="yes">Разрешено</td></tr>
            <tr><td>Уровень 3</td><td>Подзадача подзадачи</td><td class="yes">Разрешено</td></tr>
            <tr><td>Уровень 4</td><td>…</td><td class="yes">Разрешено</td></tr>
            <tr><td>Уровень 5</td><td>…</td><td class="yes">Разрешено (максимум)</td></tr>
            <tr><td>Уровень 6+</td><td>—</td><td class="no">Блокируется (400)</td></tr>
          </tbody>
        </table>
      </div>
      <div class="info" style="margin-top:12px">
        <div class="info-icon">💡</div>
        <div>Frontend: кнопка «Добавить подзадачу» скрывается на задаче глубины 5. Backend: <code>POST /boards/:bid/tasks</code> с <code>parentId</code> возвращает <code>400 Subtask depth limit exceeded (max 5)</code>.</div>
      </div>
    </div>

    <div class="notice" style="margin-top:16px">
      <div class="notice-icon">⚠️</div>
      <div>Удаление родительской задачи удаляет всё поддерево. Операция выполняется в одной транзакции — частичного удаления не будет.</div>
    </div>
  </div>

  <!-- ════ BULK OPERATIONS ════ -->
  <div class="section" id="bulk">
    <div class="section-label">Основной функционал</div>
    <div class="section-title">Массовые операции <span class="new-badge">новое</span></div>
    <div class="section-sub">Выберите несколько задач и измените их разом — статус, приоритет, исполнителя или удалите все сразу.</div>

    <div class="subsection">
      <div class="subsection-title">Как выбрать задачи</div>
      <div class="steps">
        <div class="step"><div class="step-num">1</div><div><h4>Kanban-вид</h4><p>Наведите курсор на карточку — появится чекбокс в верхнем левом углу. Нажмите для выбора. При выборе первой задачи чекбоксы появляются на всех карточках.</p></div></div>
        <div class="step"><div class="step-num">2</div><div><h4>List View (список)</h4><p>Чекбокс в первом столбце каждой строки. В заголовке — «выбрать все» для текущего представления.</p></div></div>
        <div class="step"><div class="step-num">3</div><div><h4>Снять выбор</h4><p>Кнопка «✕» в плавающей панели или клик вне задач снимает весь выбор.</p></div></div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Доступные действия (BulkActionBar)</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Действие</th><th>Как использовать</th><th>Ограничения</th></tr></thead>
          <tbody>
            <tr><td>Изменить статус</td><td>Выпадающий список «Статус…» в панели</td><td>Статус должен быть из текущего воркфлоу доски</td></tr>
            <tr><td>Изменить приоритет</td><td>Выпадающий список «Приоритет…»</td><td>HIGH / MEDIUM / LOW / Очистить</td></tr>
            <tr><td>Назначить исполнителя</td><td>Выпадающий список «Исполнитель…»</td><td>Только участники воркспейса; «Очистить» снимает исполнителя</td></tr>
            <tr><td>Удалить</td><td>Кнопка «Удалить» → подтверждение «Да / Нет»</td><td>Удаляет подзадачи каскадно; необратимо</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Права доступа</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Роль</th><th>Массовое обновление</th><th>Массовое удаление</th></tr></thead>
          <tbody>
            <tr><td><span class="role-badge r-owner">Owner</span></td><td class="yes">Разрешено</td><td class="yes">Разрешено</td></tr>
            <tr><td><span class="role-badge r-member">Member</span></td><td class="yes">Разрешено</td><td class="yes">Разрешено</td></tr>
            <tr><td><span class="role-badge r-viewer">Viewer</span></td><td class="no">403</td><td class="no">403</td></tr>
            <tr><td>Не участник</td><td class="no">404</td><td class="no">404</td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">API — массовые операции</div>
      <div class="code-block">
<span class="cm"># Массовое обновление (до 100 задач)</span>
PATCH /api/boards/:boardId/tasks/bulk
{
  "ids": ["uuid1", "uuid2", ...],   <span class="cm">// 1–100 UUID задач с этой доски</span>
  "patch": {
    "statusId": "uuid",             <span class="cm">// опционально — должен быть в воркфлоу доски</span>
    "priority": "HIGH",             <span class="cm">// HIGH | MEDIUM | LOW | null (очистить)</span>
    "assigneeId": "userId"          <span class="cm">// UUID участника или null (очистить)</span>
  }
}
<span class="cm"># Ответ: { "updated": N }</span>

<span class="cm"># Массовое удаление (до 100 задач)</span>
POST /api/boards/:boardId/tasks/bulk-delete
{
  "ids": ["uuid1", "uuid2", ...]    <span class="cm">// 1–100 UUID задач с этой доски</span>
}
<span class="cm"># Ответ: { "deleted": N }</span>
      </div>
      <div class="notice" style="margin-top:12px">
        <div class="notice-icon">⚠️</div>
        <div>Задачи из других досок в списке <code>ids</code> <strong>молча игнорируются</strong> (вернётся <code>updated: 0</code>). Это намеренное поведение — не ошибка. Лимит 100 задач за раз.</div>
      </div>
    </div>

    <div class="subsection">
      <div class="subsection-title">Аудит — что записывается в историю</div>
      <div class="info">
        <div class="info-icon">📋</div>
        <div>При массовом обновлении каждое изменённое поле записывается в <code>TaskHistory</code> (поле, старое значение, новое значение). При смене статуса также обновляется <code>TaskStatusHistory</code> — закрывается предыдущий интервал и открывается новый. История ведётся точно так же, как для одиночного изменения.</div>
      </div>
    </div>
  </div>

  <!-- ════ GLOBAL SEARCH ════ -->
  <div class="section" id="search">
    <div class="section-label">Основной функционал</div>
    <div class="section-title">Глобальный поиск Cmd+K <span class="new-badge">новое</span></div>
    <div class="section-sub">Быстрый поиск задач из любого места системы по нажатию Cmd+K.</div>

    <div class="subsection">
      <div class="subsection-title">Как пользоваться</div>
      <div class="steps">
        <div class="step"><div class="step-num">1</div><div><h4>Открыть палитру</h4><p><code>Cmd+K</code> (Mac) или <code>Ctrl+K</code> (Windows/Linux). Работает в любом месте системы, кроме открытых модальных окон.</p></div></div>