@x4lt7ab/tab-for-projects 0.1.0 → 0.1.1

package/src/web/dist/index.html

@@ -4,23 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Project Management</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
-      rel="stylesheet"
-    />
     <style>
       .material-symbols-outlined {
         font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
         vertical-align: middle;
       }
     </style>
-    <script type="module" crossorigin src="/assets/index-Bonqd4_2.js"></script>
+    <script type="module" crossorigin src="/assets/index-aUW2zejq.js"></script>
+    <style>@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc-BOeWTOD4.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc-DqGufNeO.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc-DlzME5K_.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc-CkhJZR-_.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc-CBcvBZtf.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc-DO1Apj_S.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7-Dx4kXJAl.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc-BOeWTOD4.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc-DqGufNeO.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc-DlzME5K_.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc-CkhJZR-_.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc-CBcvBZtf.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc-DO1Apj_S.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7-Dx4kXJAl.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc-BOeWTOD4.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc-DqGufNeO.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc-DlzME5K_.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc-CkhJZR-_.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc-CBcvBZtf.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc-DO1Apj_S.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7-Dx4kXJAl.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggqxSuXd-C8S-KRRz.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggOxSuXd-Dvxsihut.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggSxSuXd-DL7QRZyv.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggixSuXd-usUDDRr7.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggmxSuXd-Ch3YOpNY.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggexSg-DHIcAJRg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggqxSuXd-C8S-KRRz.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggOxSuXd-Dvxsihut.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggSxSuXd-DL7QRZyv.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggixSuXd-usUDDRr7.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggmxSuXd-Ch3YOpNY.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggexSg-DHIcAJRg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggqxSuXd-C8S-KRRz.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggOxSuXd-Dvxsihut.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggSxSuXd-DL7QRZyv.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggixSuXd-usUDDRr7.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggmxSuXd-Ch3YOpNY.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggexSg-DHIcAJRg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggqxSuXd-C8S-KRRz.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggOxSuXd-Dvxsihut.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggSxSuXd-DL7QRZyv.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggixSuXd-usUDDRr7.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggmxSuXd-Ch3YOpNY.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggexSg-DHIcAJRg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggqxSuXd-C8S-KRRz.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggOxSuXd-Dvxsihut.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggSxSuXd-DL7QRZyv.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggixSuXd-usUDDRr7.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggmxSuXd-Ch3YOpNY.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/xn7gYHE41ni1AdIRggexSg-DHIcAJRg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:100 700;font-display:swap;src:url(/assets/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1Q-CpotRDAj.woff2) format('woff2')}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}</style>
   </head>
   <body>
     <div id="root"></div>

package/src/web/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   Badge,
   Button,
@@ -12,6 +12,7 @@ import {
   useTheme,
 } from "./components";
 import { API_BASE } from "./api";
+import { useRealtimeEvents, type DomainEvent } from "./useRealtimeEvents";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -30,13 +31,21 @@ interface Project {
 interface Task {
   id: string;
   project_id: string;
+  number: number;
   title: string;
   description: string;
   status: "todo" | "in_progress" | "done";
+  priority: number | null;
   created_at: string;
   updated_at: string;
 }
 
+interface Tag {
+  id: string;
+  name: string;
+  created_at: string;
+}
+
 const statusOptions = [
   { value: "active", label: "Active" },
   { value: "paused", label: "Paused" },
@@ -78,26 +87,61 @@ export function App() {
   const projectSlugMatch = path.match(/^\/projects\/([^/]+)$/);
   const projectSlug = projectSlugMatch?.[1] ?? null;
 
+  // Real-time event listeners from child views
+  const eventListenersRef = useRef(new Set<(e: DomainEvent) => void>());
+
+  const onEvent = useCallback((event: DomainEvent) => {
+    for (const fn of eventListenersRef.current) fn(event);
+  }, []);
+
+  const { connected } = useRealtimeEvents(onEvent);
+
+  const subscribeEvents = useCallback((fn: (e: DomainEvent) => void) => {
+    eventListenersRef.current.add(fn);
+    return () => { eventListenersRef.current.delete(fn); };
+  }, []);
+
   return (
     <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh", fontFamily: theme.font.body }}>
-      <TopBar />
+      <TopBar trailing={<ConnectionIndicator connected={connected} />} />
 
       <main style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", minWidth: 0 }}>
         {projectSlug ? (
-          <ProjectView slug={projectSlug} onBack={() => navigate("/")} />
+          <ProjectView slug={projectSlug} onBack={() => navigate("/")} subscribeEvents={subscribeEvents} />
         ) : (
-          <DashboardView onOpenProject={(slug) => navigate(`/projects/${slug}`)} />
+          <DashboardView onOpenProject={(slug) => navigate(`/projects/${slug}`)} subscribeEvents={subscribeEvents} />
         )}
       </main>
     </div>
   );
 }
 
+// ---------------------------------------------------------------------------
+// ConnectionIndicator
+// ---------------------------------------------------------------------------
+
+function ConnectionIndicator({ connected }: { connected: boolean }) {
+  const { theme } = useTheme();
+  return (
+    <span
+      title={connected ? "Live updates active" : "Reconnecting..."}
+      style={{
+        display: "inline-block",
+        width: 8,
+        height: 8,
+        borderRadius: theme.radius.full,
+        background: connected ? theme.color.success : theme.color.textFaint,
+        transition: "background 0.3s",
+      }}
+    />
+  );
+}
+
 // ---------------------------------------------------------------------------
 // DashboardView
 // ---------------------------------------------------------------------------
 
-function DashboardView({ onOpenProject }: { onOpenProject: (slug: string) => void }) {
+function DashboardView({ onOpenProject, subscribeEvents }: { onOpenProject: (slug: string) => void; subscribeEvents: (fn: (e: DomainEvent) => void) => () => void }) {
   const { theme } = useTheme();
   const [projects, setProjects] = useState<Project[]>([]);
   const [name, setName] = useState("");
@@ -105,28 +149,37 @@ function DashboardView({ onOpenProject }: { onOpenProject: (slug: string) => voi
   const [description, setDescription] = useState("");
   const [showCreateForm, setShowCreateForm] = useState(false);
 
+  const fetchProjectsRef = useRef<() => void>();
+
   async function fetchProjects() {
     const res = await fetch(`${API_BASE}/api/projects`);
-    setProjects(await res.json());
+    if (!res.ok) return;
+    const body = await res.json();
+    setProjects(body.data);
   }
 
+  fetchProjectsRef.current = fetchProjects;
+
   useEffect(() => {
     fetchProjects();
-  }, []);
+    return subscribeEvents((event) => {
+      if (event.entity === "project") fetchProjectsRef.current?.();
+    });
+  }, [subscribeEvents]);
 
   async function handleCreate(e: React.FormEvent) {
     e.preventDefault();
     if (!name.trim()) return;
-    await fetch(`${API_BASE}/api/projects`, {
+    const res = await fetch(`${API_BASE}/api/projects`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ name, slug, description }),
     });
+    if (!res.ok) return;
     setName("");
     setSlug("");
     setDescription("");
     setShowCreateForm(false);
-    fetchProjects();
   }
 
   return (
@@ -349,7 +402,7 @@ const taskStatusOptions = [
   { value: "done", label: "Done" },
 ];
 
-function ProjectView({ slug, onBack }: { slug: string; onBack: () => void }) {
+function ProjectView({ slug, onBack, subscribeEvents }: { slug: string; onBack: () => void; subscribeEvents: (fn: (e: DomainEvent) => void) => () => void }) {
   const { theme } = useTheme();
   const [project, setProject] = useState<Project | null>(null);
   const [tasks, setTasks] = useState<Task[]>([]);
@@ -359,6 +412,9 @@ function ProjectView({ slug, onBack }: { slug: string; onBack: () => void }) {
 
   const selectedTask = selectedTaskId ? tasks.find((t) => t.id === selectedTaskId) ?? null : null;
 
+  const slugRef = useRef(slug);
+  slugRef.current = slug;
+
   async function fetchProject() {
     const res = await fetch(`${API_BASE}/api/projects/${encodeURIComponent(slug)}`);
     if (!res.ok) { setNotFound(true); return; }
@@ -368,54 +424,65 @@ function ProjectView({ slug, onBack }: { slug: string; onBack: () => void }) {
   }
 
   async function fetchTasks(projectSlug: string) {
-    const res = await fetch(`${API_BASE}/api/projects/${projectSlug}/tasks`);
-    setTasks(await res.json());
+    const res = await fetch(`${API_BASE}/api/projects/${encodeURIComponent(projectSlug)}/tasks`);
+    if (!res.ok) return;
+    const body = await res.json();
+    setTasks(body.data);
   }
 
+  const fetchProjectRef = useRef(fetchProject);
+  fetchProjectRef.current = fetchProject;
+
   useEffect(() => {
     setNotFound(false);
     setProject(null);
     setTasks([]);
     setSelectedTaskId(null);
     fetchProject();
-  }, [slug]);
+
+    return subscribeEvents((event) => {
+      if (event.entity === "project" || event.entity === "task") {
+        fetchProjectRef.current();
+      }
+    });
+  }, [slug, subscribeEvents]);
 
   async function handleStatusChange(status: Project["status"]) {
     if (!project) return;
-    await fetch(`${API_BASE}/api/projects/${project.slug}`, {
+    const res = await fetch(`${API_BASE}/api/projects/${encodeURIComponent(project.slug)}`, {
       method: "PATCH",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ status }),
     });
-    fetchProject();
+    if (!res.ok) return;
   }
 
   async function handleAddTask(e: React.FormEvent) {
     e.preventDefault();
     if (!newTaskTitle.trim() || !project) return;
-    await fetch(`${API_BASE}/api/projects/${project.slug}/tasks`, {
+    const res = await fetch(`${API_BASE}/api/projects/${encodeURIComponent(project.slug)}/tasks`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ title: newTaskTitle }),
     });
+    if (!res.ok) return;
     setNewTaskTitle("");
-    fetchTasks(project.slug);
   }
 
   async function handleTaskStatusChange(taskId: string, status: Task["status"]) {
     if (!project) return;
-    await fetch(`${API_BASE}/api/projects/${project.slug}/tasks/${taskId}`, {
+    const res = await fetch(`${API_BASE}/api/projects/${encodeURIComponent(project.slug)}/tasks/${taskId}`, {
       method: "PATCH",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ status }),
     });
-    fetchTasks(project.slug);
+    if (!res.ok) return;
   }
 
   async function handleDeleteTask(taskId: string) {
     if (!project) return;
-    await fetch(`${API_BASE}/api/projects/${project.slug}/tasks/${taskId}`, { method: "DELETE" });
-    fetchTasks(project.slug);
+    const res = await fetch(`${API_BASE}/api/projects/${encodeURIComponent(project.slug)}/tasks/${taskId}`, { method: "DELETE" });
+    if (!res.ok) return;
   }
 
   if (notFound) {
@@ -585,9 +652,30 @@ function ProjectView({ slug, onBack }: { slug: string; onBack: () => void }) {
                             overflow: "hidden",
                             textOverflow: "ellipsis",
                             whiteSpace: "nowrap",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: theme.spacing.xs,
                           }}
                         >
+                          <span style={{ color: theme.color.textFaint, fontFamily: "monospace", fontSize: theme.font.size.xs, flexShrink: 0 }}>
+                            #{task.number}
+                          </span>
                           {task.title}
+                          {task.priority != null && (
+                            <span
+                              style={{
+                                flexShrink: 0,
+                                fontSize: "0.6rem",
+                                fontWeight: 600,
+                                color: task.priority <= 3 ? theme.color.error : task.priority <= 6 ? theme.color.tertiary : theme.color.textFaint,
+                                background: theme.color.surfaceContainerHigh,
+                                borderRadius: theme.radius.sm,
+                                padding: "1px 4px",
+                              }}
+                            >
+                              P{task.priority}
+                            </span>
+                          )}
                         </span>
                         <Stack direction="row" gap="xs" style={{ flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
                           <Select
@@ -622,6 +710,7 @@ function ProjectView({ slug, onBack }: { slug: string; onBack: () => void }) {
     {selectedTask && (
       <TaskDetailPanel
         task={selectedTask}
+        projectSlug={slug}
         onClose={() => setSelectedTaskId(null)}
       />
     )}
@@ -652,10 +741,42 @@ function useWindowWidth() {
 
 const SMALL_BREAKPOINT = 768;
 
-function TaskDetailPanel({ task, onClose }: { task: Task; onClose: () => void }) {
+function TaskDetailPanel({ task, projectSlug, onClose }: { task: Task; projectSlug: string; onClose: () => void }) {
   const { theme } = useTheme();
   const windowWidth = useWindowWidth();
   const isSmall = windowWidth < SMALL_BREAKPOINT;
+  const [tags, setTags] = useState<Tag[]>([]);
+  const [newTagName, setNewTagName] = useState("");
+
+  useEffect(() => {
+    fetchTags();
+  }, [task.id]);
+
+  async function fetchTags() {
+    const res = await fetch(`${API_BASE}/api/projects/${encodeURIComponent(projectSlug)}/tasks/${task.id}/tags`);
+    if (!res.ok) return;
+    const body = await res.json();
+    setTags(body.data);
+  }
+
+  async function handleAddTag(e: React.FormEvent) {
+    e.preventDefault();
+    if (!newTagName.trim()) return;
+    const res = await fetch(`${API_BASE}/api/projects/${encodeURIComponent(projectSlug)}/tasks/${task.id}/tags`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name: newTagName.trim().toLowerCase() }),
+    });
+    if (!res.ok) return;
+    setNewTagName("");
+    fetchTags();
+  }
+
+  async function handleRemoveTag(tagId: string) {
+    const res = await fetch(`${API_BASE}/api/projects/${encodeURIComponent(projectSlug)}/tasks/${task.id}/tags/${tagId}`, { method: "DELETE" });
+    if (!res.ok) return;
+    fetchTags();
+  }
 
   const formatDate = (iso: string) =>
     new Date(iso).toLocaleDateString("en-US", {
@@ -722,8 +843,27 @@ function TaskDetailPanel({ task, onClose }: { task: Task; onClose: () => void })
                   lineHeight: 1.3,
                 }}
               >
+                <span style={{ color: theme.color.textFaint, fontFamily: "monospace", fontWeight: 500, fontSize: theme.font.size.sm }}>
+                  #{task.number}
+                </span>{" "}
                 {task.title}
               </h2>
+              {task.priority != null && (
+                <span
+                  style={{
+                    display: "inline-block",
+                    marginTop: theme.spacing.xs,
+                    fontSize: theme.font.size.xs,
+                    fontWeight: 600,
+                    color: task.priority <= 3 ? theme.color.error : task.priority <= 6 ? theme.color.tertiary : theme.color.textFaint,
+                    background: theme.color.surfaceContainerHigh,
+                    borderRadius: theme.radius.sm,
+                    padding: "2px 6px",
+                  }}
+                >
+                  Priority {task.priority}
+                </span>
+              )}
             </div>
             <IconButton icon="close" size={18} onClick={onClose} />
           </Stack>
@@ -766,6 +906,64 @@ function TaskDetailPanel({ task, onClose }: { task: Task; onClose: () => void })
             </p>
           )}
 
+          {/* Tags */}
+          <div style={{ marginTop: theme.spacing.xl }}>
+            <span
+              style={{
+                display: "block",
+                fontSize: "0.625rem",
+                fontWeight: 700,
+                letterSpacing: "0.08em",
+                textTransform: "uppercase",
+                color: theme.color.textFaint,
+                marginBottom: theme.spacing.sm,
+              }}
+            >
+              Tags
+            </span>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: theme.spacing.xs, marginBottom: theme.spacing.sm }}>
+              {tags.map((tag) => (
+                <span
+                  key={tag.id}
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 4,
+                    fontSize: theme.font.size.xs,
+                    color: theme.color.primary,
+                    background: theme.color.surfaceContainerHigh,
+                    borderRadius: theme.radius.full,
+                    padding: "2px 8px",
+                  }}
+                >
+                  {tag.name}
+                  <span
+                    onClick={() => handleRemoveTag(tag.id)}
+                    style={{ cursor: "pointer", color: theme.color.textFaint, fontSize: "0.6rem", lineHeight: 1 }}
+                  >
+                    x
+                  </span>
+                </span>
+              ))}
+              {tags.length === 0 && (
+                <span style={{ fontSize: theme.font.size.xs, color: theme.color.textFaint, fontStyle: "italic" }}>
+                  No tags
+                </span>
+              )}
+            </div>
+            <form onSubmit={handleAddTag} style={{ display: "flex", gap: theme.spacing.xs }}>
+              <Input
+                placeholder="Add tag..."
+                value={newTagName}
+                onChange={(e) => setNewTagName(e.target.value)}
+                style={{ flex: 1, fontSize: theme.font.size.xs, padding: "2px 6px" }}
+              />
+              <Button type="submit" size="sm" style={{ fontSize: theme.font.size.xs, padding: "2px 8px" }}>
+                Add
+              </Button>
+            </form>
+          </div>
+
           {/* Metadata */}
           <div
             style={{
@@ -789,7 +987,9 @@ function TaskDetailPanel({ task, onClose }: { task: Task; onClose: () => void })
             </span>
             <Stack gap="xs">
               {[
+                { label: "Number", value: `#${task.number}` },
                 { label: "ID", value: task.id },
+                { label: "Priority", value: task.priority != null ? `${task.priority}` : "—" },
                 { label: "Created", value: formatDate(task.created_at) },
                 { label: "Updated", value: formatDate(task.updated_at) },
               ].map((row) => (

package/src/web/src/components/TopBar.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from "./ThemeContext";
 import { ThemeSwitcher } from "./ThemeSwitcher";
 
-export function TopBar() {
+export function TopBar({ trailing }: { trailing?: React.ReactNode }) {
   const { theme } = useTheme();
 
   return (
@@ -27,9 +27,11 @@ export function TopBar() {
           maxWidth: 1400,
           padding: `${theme.spacing.md} ${theme.spacing["2xl"]}`,
           boxSizing: "border-box",
+          gap: 8,
         }}
       >
-        <div style={{ display: "flex", alignItems: "center" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          {trailing}
           <ThemeSwitcher />
         </div>
       </div>

package/src/web/src/useRealtimeEvents.ts

@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from "react";
+
+export interface DomainEvent {
+  entity: "project" | "task";
+  action: "created" | "updated" | "deleted";
+  payload: Record<string, unknown>;
+}
+
+export function useRealtimeEvents(onEvent: (event: DomainEvent) => void): { connected: boolean } {
+  const [connected, setConnected] = useState(false);
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+
+  useEffect(() => {
+    let ws: WebSocket | null = null;
+    let reconnectTimer: ReturnType<typeof setTimeout>;
+    let attempt = 0;
+    let unmounted = false;
+
+    function connect() {
+      if (unmounted) return;
+      const proto = location.protocol === "https:" ? "wss:" : "ws:";
+      ws = new WebSocket(`${proto}//${location.host}/ws`);
+
+      ws.onopen = () => {
+        attempt = 0;
+        setConnected(true);
+      };
+
+      ws.onmessage = (e) => {
+        try {
+          const event: DomainEvent = JSON.parse(e.data);
+          onEventRef.current(event);
+        } catch {
+          // ignore malformed messages
+        }
+      };
+
+      ws.onclose = () => {
+        setConnected(false);
+        if (unmounted) return;
+        const delay = Math.min(1000 * 2 ** attempt, 30000);
+        attempt++;
+        reconnectTimer = setTimeout(connect, delay);
+      };
+
+      ws.onerror = () => {
+        ws?.close();
+      };
+    }
+
+    connect();
+
+    return () => {
+      unmounted = true;
+      clearTimeout(reconnectTimer);
+      ws?.close();
+    };
+  }, []);
+
+  return { connected };
+}

package/src/web/vite.config.ts

@@ -1,8 +1,9 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import webfontDownload from "vite-plugin-webfont-dl";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), webfontDownload()],
   build: {
     outDir: "dist",
   },
@@ -11,6 +12,10 @@ export default defineConfig({
     proxy: {
       "/api": "http://localhost:3000",
       "/mcp": "http://localhost:3000",
+      "/ws": {
+        target: "ws://localhost:3000",
+        ws: true,
+      },
     },
   },
 });